TabLayoutPanel 位于 GWT 页面底部

Question

我想知道是否可以在GWT页面的最底部有一个TabLayoutPanel，不幸的是，网上的文档太少了。

Answer 1

是的，这是可能的。最简单的方法是使用 DockLayoutPanel 区域。应将 TabLayoutPanel 包装在另一个 LayoutPanel 中，以确保内容正确显示，否则必须向 TabLayoutPanel 添加高度。我从内存中键入了这个，但语法应该是正确的。

<DockLayoutPanel unit="PX">
  <g:south size="200">
     <g:TabLayoutPanel barHeight="30" barUnit="PX">
        <g:tab>
           <g:header>Tab 1</g:header>
           <g:Label> Tab 1 content</g:Label>
        </g:tab>
        <g:tab>
           <g:header>Tab 2</g:header>
           <g:Label>Tab 2 content</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
  </g:south>
  <g:center>
     <g:FlowPanel>
        <g:Label>Main page content</g:Label>
     </g:FlowPanel>
  <g:center>
</DockLayoutPanel>

Answer 2

不是很优雅，但它有效：

public class BottomLabLayoutPanel extends TabLayoutPanel
{
    public BottomLabLayoutPanel(double barHeight, Unit barUnit)
    {
        super(barHeight, barUnit);
        LayoutPanel panel = (LayoutPanel)getWidget();
        if (panel.getWidgetCount() >= 2)
        {
            Widget w1 = panel.getWidget(0);
            Widget w2 = panel.getWidget(1);
            Element e1 = w1.getElement().getParentElement();
            Element e2 = w2.getElement().getParentElement();
            if (e1 != null)
                e1.setClassName("BottomTabLayoutPanel TabPanel");
            if (e2 != null)
                e2.setClassName("BottomTabLayoutPanel ContentPanel");
        }
    }
}

在 CSS 中：

.BottomTabLayoutPanel.TabPanel
{
    top: auto !important;
    bottom: 0px !important;
}
.BottomTabLayoutPanel.ContentPanel
{
    top: 0px !important;
    margin-bottom: 35px !important;
}