GWT垂直选项卡，如iGoogle

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

---

如何实现同样的效果？

您可以使用ext js的垂直选项卡-请参阅此演示

您可以使用ext js的gwt端口：

---

Smart gwt还有一个垂直选项卡实现（与gwt ext不同），可以在左侧菜单上搜索方向。

我想您要查找的是（向下滚动一点）。它工作得很好，是一个普通的GWT小部件，不需要第三方库。

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

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>

.选项卡面板{
高度：400px；
宽度：800px；
}

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

---

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

谢谢你的回答，megas

一个扩展可以使用一些水平（原始）布局和一些垂直（新）布局的TABLAYOUTPANEL：

---

可以将ID（即#myVertTab）添加到css选择器。

您的意思是这样吗@Chii是的，这就是我的意思是的，但它是一个水平选项卡布局面板！！对不起，我误解了这个问题。构建带有链接和CSS的水平选项卡面板非常容易。使用一个完整的第三方工具包（在那一点上不是真正的GWT）可能有点过头了。不确定你是否真的需要投票否决我：（这看起来更好，我喜欢CSS方法，而不是包括一个more库或手动重写classYes，+1，这是更好的方法。