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

TabLayoutPanel位于GWT页面的底部

2 个答案: