GWT垂直选项卡，如iGoogle

Question

我正在使用GWT，并想开发一个垂直选项卡面板，就像在iGoogle中一样。

怎样才能达到同样的效果呢？

Answer 1

您可以使用ext-js的垂直选项卡-请参阅此演示http://iamtotti.com/playground/js/ext-3.1.1/examples/tabs/tabs.html

您可以使用ext-js的gwt端口：http://code.google.com/p/gwt-ext/

Smart gwt还有一个垂直的标签实现(与gwt-ext的不同)- http://www.smartclient.com/smartgwt/showcase，并在左侧菜单上搜索方向。

Answer 2

我也有同样的问题，并决定不使用第三方库只为一个小部件。这是我最终使用的一个轻量级解决方案--它基于调整样式。

verticaltabpanel.css：

@external gwt-TabLayoutPanel;
.gwt-TabLayoutPanel>div {
    position: static !important;
}
.gwt-TabLayoutPanel {
    margin-left: 30px;
}
@external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
    top: 0 !important;
    width: 140px !important;
}
@external gwt-TabLayoutPanelTab;
.gwt-TabLayoutPanelTab {
    display: block !important;
    margin-top: 2px;
    padding: 8px 6px !important; 
}
@external gwt-TabLayoutPanelContentContainer;
.gwt-TabLayoutPanelContentContainer {
    left: 150px !important;
    top: 0 !important;
}

像往常一样添加到资源中：

public interface YouAppResources extends ClientBundle {

    @Source("verticaltabpanel.css")
    CssResource verticalTabPanelStyles();
}

然后在你的应用启动时注入它：

resources.verticalTabPanelStyles().ensureInjected();

在模板中定义选项卡面板，如下所示：

<ui:style>
    .tabPanel {
        height: 400px;
        width: 800px;
    }
</ui:style>
<g:TabLayoutPanel addStyleNames="{style.tabPanel}" barUnit='PX' barHeight='0'>
</g:TabLayoutPanel>

请注意，您必须设置高度和宽度，样式应添加，而不是设置。

这种方法的缺点是应用程序中的所有选项卡面板现在都是垂直的。如果你需要一个水平的，你可以使用旧的TabPanel (注意，它已被弃用)。这对我的情况很好，因为我的应用程序中有许多垂直的选项卡面板，但只有一个水平。

Answer 3

谢谢你的回答，梅加斯。

一个扩展使得可以使用一些具有水平(原始)和垂直(新)布局的TabLayoutPanels :可以向css选择器添加it (即#myVertTab)。