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

然后在您的应用启动时注入它:

resources.verticalTabPanelStyles().ensureInjected();

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

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

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

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