gwt - GWT 中页面底部的 TabLayoutPanel

Question

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

Answer 1

不是很优雅，但它有效：

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;
}

Answer 2

对的，这是可能的。最简单的方法是使用 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>