Question

有没有办法让TabLayoutPanel动态调整自己的标签内容？

目前，我只看到顶部的菜单，标签区域被压扁，当我没有指定height＆amp; width。

Answer 1

不自动。你必须告诉TabLayoutPanel应该有多大 - 或让它的父小部件做到这一点。如果没有自定义代码，它的孩子就无法告诉它有多大。

Answer 2

我创建了一个小的解决方法 - 在添加所有标签后，我就足以从标签容器中删除溢出。

    // Tabs are hidden because of overflow setting. Remove overflow &
    // relative positioning from the tab widget.
    for (int i = 0; i < tabLayout.getWidgetCount(); i++) {
        final Widget widget = tabLayout.getWidget(i);
        DOM.setStyleAttribute(widget.getElement(), "position", "relative");

        final Element parent = DOM.getParent(widget.getElement());
        DOM.setStyleAttribute(parent, "overflowX", "visible");
        DOM.setStyleAttribute(parent, "overflowY", "visible");
    }

PS：在创建TabLayoutPanel时使用PX单位以与IE兼容，否则标签导航可能不可见。

祝你好运

波格丹。

Answer 3

您可以使用DecoratedTabPanel。并且不需要任何解决方法

爪哇 ...

VerticalPanel tab1 = new VerticalPanel();
VerticalPanel tab2 = new VerticalPanel();
VerticalPanel tab3 = new VerticalPanel();

DecoratedTabPanel tabPanel = new DecoratedTabPanel();
tabPanel.add(tab1);
tabPanel.add(tab2);
tabPanel.add(tab3);

...

CSS

.gwt-DecoratedTabBar {
    padding-top: 4px;
    padding-right: 14px;
    padding-left: 4px;
    padding-bottom: 0;
    cursor: default;
    color: #7a7a7a;
    font-weight: bold;
    text-align: center;
    background: #fafafa;
}

/** The tab bar items the users click on*/
.gwt-DecoratedTabBar .gwt-TabBarItem {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    background: #fff;
    color: #7a7a7a;
    margin-right: 3px;
}

/** The tab bar items the users click on - selected version*/
.gwt-DecoratedTabBar .gwt-TabBarItem-selected {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    cursor: pointer;
    padding-top: 3px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    background: #1d6bbb;
    color: #fff;
}

/** the body of the tab*/
.gwt-TabPanelBottom {
    border-top: 3px solid #1d6bbb;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

    padding: 6px;
    background: #fff;
}

Answer 4

您可以使用DecoratedTabPanel，因为它会根据其子窗口小部件动态地改变tabpanel的大小。

DecoratedTabPanel dtp = new DecoratedTabPanel();
dtp.add(widget, title)
dtp.selectTab(0);

TabLayoutPanel动态调整大小？

4 个答案: