gwt - 控制gwt中标签栏的标签

Question

抱歉愚蠢的问题我一般是 UI 新手，特别是 gwt

1. 在 gwt 中使用标签面板时如何控制标签宽度？如何
2. 我怎么知道每个小部件有哪些 CSS 属性？我想控制标签颜色（选中和未选中）并删除标签框

谢谢

Answer 1

如果您是一般 UI 的新手，也许您不知道 [Firebug]。它是一个 Firefox 插件，允许您（除其他外）检查页面中的每个元素并了解样式是如何应用的，甚至可以实时更改它们。这对于 GWT 的开发至关重要。

Besides that, in order to control each tab style separatelly, I think you will need to insert Labels on the tabs, using TabBar.addTab(Widget widget), and set their styles.

Answer 2

DecoratedTabBar的javadoc列出了可用于选定和未选定选项卡的样式名称。

* .gwt-DecoratedTabBar { the tab bar itself }
* .gwt-DecoratedTabBar .gwt-TabBarFirst { the left edge of the bar }
* .gwt-DecoratedTabBar .gwt-TabBarRest { the right edge of the bar }
* .gwt-DecoratedTabBar .gwt-TabBarItem { unselected tabs }
* .gwt-DecoratedTabBar .gwt-TabBarItem-wrapper { table cell around tab }
* .gwt-DecoratedTabBar .gwt-TabBarItem-selected { additional style for selected tabs }
* .gwt-DecoratedTabBar .gwt-TabBarItem-wrapper-selected { table cell around selected tab }
* .gwt-DecoratedTabBar .tabTopLeft { top left corner of the tab}
* .gwt-DecoratedTabBar .tabTopLeftInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabTopCenter { top center of the tab}
* .gwt-DecoratedTabBar .tabTopCenterInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabTopRight { top right corner of the tab}
* .gwt-DecoratedTabBar .tabTopRightInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleLeft { left side of the tab }
* .gwt-DecoratedTabBar .tabMiddleLeftInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleCenter { center of the tab, where the tab text or widget resides }
* .gwt-DecoratedTabBar .tabMiddleCenterInner { the inner element of the cell}
* .gwt-DecoratedTabBar .tabMiddleRight { right side of the tab }
* .gwt-DecoratedTabBar .tabMiddleRightInner { the inner element of the cell}