TabLayoutPanel 将选项卡向右对齐答案

【问题标题】：TabLayoutPanel align tab to the rightTabLayoutPanel 将选项卡向右对齐
【发布时间】：2010-06-05 16:33:49
【问题描述】：

我在 GWT 中使用 TabLayoutPanel，我希望最后一个选项卡显示在页面的右侧。可以这样做吗？

【问题讨论】：

标签： gwt

【解决方案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);
}

【讨论】：

【解决方案2】：

如果您想将所有选项卡右对齐，请尝试以下操作：

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

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

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

【讨论】：

谢谢。这对我有用.. :)。但是我的主页中有两个选项卡面板。我希望一个应该右对齐，但第二个应该默认对齐（左）。这可能吗，因为 gwt 每个组件都有自己的 css 元素？

【解决方案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);

【讨论】：

【解决方案4】：

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

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

请记住，您的标签会以相反的顺序出现（最先添加的将在右侧）

【讨论】：

【解决方案5】：

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

【讨论】：