TabLayoutPanel将标签右对齐

Question

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

Answer 1

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

Answer 2

短回答 -

我在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 3

共同的想法：

1. 组标签容器宽度的预定义的 “16384px”，而不是 “自动”
2. 集 “浮动：权利” 的CSS财产到最后一个选项卡

3. 将最后一个选项卡移动到firts位置

   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 4

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

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

请记住，你的标签会以相反的顺序（先加入将右一）

Answer 5

如果要对齐所有标签向右试试这个：

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

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

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