GWT 垂直选项卡，如 iGoogle

Question

我正在使用 GWT，并希望开发一个像 iGoogle 中的垂直选项卡面板。

如何才能实现同样的目标？

Answer 1

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

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

然后在应用程序启动时注入(inject)它:

resources.verticalTabPanelStyles().ensureInjected();

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

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

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

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