Question

我在GWT中使用TabLayoutPanel，我希望最后一个标签显示在页面的右侧。有可能这样做吗？

Answer 1

常识：

将标签容器宽度设置为“自动”而不是预定义的“16384px”
将“float：right”css属性设置为最后一个标签

将最后一个标签移至第一个位置

public void onModuleLoad() {
        .....
        // init TabLayoutPanel 
        .....
        Widget rightTab = tabPanel.getTabWidget(0).getParent();
        DOM.setStyleAttribute(rightTab.getElement(), "float", "right");
        Widget tabBar = rightTab.getParent();
        tabBar.setWidth("auto");
        tabPanel.selectTab(1);
}

Answer 2

如果要将所有标签对齐到右侧，请尝试以下操作：

.gwt-TabBar .gwt-TabBarFirst {
    width: 100%;
}

.gwt-TabBar .gwt-TabBarRest {
    width: 4px;
}

.gwt-TabBar .gwt-TabBarFirst-wrapper {
    width: 100%;
}

Answer 3

简答 - 没有。

我深入了解GWT 2.3和AFAIK的源代码，从TabBar和StackLayoutPanel构建自己的复合材料比开始对抗此实现更容易。

为了省去你的努力，它也不能轻易集中。对不起就是这样。

这一切都是硬编码的......

private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384;
private final FlowPanel tabBar = new FlowPanel(); 
...
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);

Answer 4

为什么不是纯粹的 CSS 解决方案？将代码与设计分开是一种很好的做法。

.gwt-TabLayoutPanelTabs {
    width: auto!important;
}
.gwt-TabLayoutPanelTab {
    float: right;
}

请记住，您的标签将按相反的顺序排列（首先添加的标签将在右侧）

Answer 5

如果你创建自己的标签，这将是非常容易的。只需创建一个标签形状的png图像（顶部有圆角）。写一个css规则。取一个FlextTable并将css应用于每个将成为您的标签的单元格，然后将该FlexTable添加到另一个mainTable中。因此，在第一行的mainTable中，将选择tabFlexTable，在第二行中选择特定tab后要显示的内容。对于第一行，将水平对齐应用于右侧。这种方式和我在我的专业项目中使用的方式相同。

TabLayoutPanel将选项卡对齐到右侧

5 个答案: