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/

智能GWT还具有垂直标签实现（其与gwt-ext不同） - http://www.smartclient.com/smartgwt/showcase并在左侧菜单中搜索方向。

Answer 2

我想你要找的是TabLayoutPanel（向下滚动一下）。它的效果很好，它是一个香草GWT小部件，不需要任何第三方库。

Answer 3

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

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 4

thx为您的答案，megas。

一个扩展可以使用一些TabLayoutPanel与水平（原始）和一些垂直（新）布局： 可以添加ID（即#myVertTab）到CSS选择器。