控制gwt中标签栏的标签答案

【问题标题】：controling the tabs of the tabs bar in gwt控制gwt中标签栏的标签
【发布时间】：2009-12-13 09:46:27
【问题描述】：

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

如何控制标签宽度在 gwt 中使用选项卡面板时？如何
我怎么知道css属性每个小部件都有？我想控制标签颜色（选择和未选中）并删除标签框

谢谢

【问题讨论】：

标签： gwt user-interface width widget tabpanel

【解决方案1】：

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

除此之外，为了单独控制每个选项卡样式，我认为您需要在选项卡上插入标签，使用TabBar.addTab(Widget widget)，并设置它们的样式。

【讨论】：

这就是人们如何知道哪个 gwt 控件添加了某些 html 元素的方式？另一个问题：我怎么知道可以为每个 gwt 小部件设置哪些 css 属性？意思是怎么知道我可以在 .gwt-DecoratedTabBar{} 中放什么？非常感谢您的帮助。
我认为这在任何地方都没有记录。通常，颜色和字体等基本样式可以正常工作。大多数元素是 Div 或 Tables。更多“结构”属性，如宽度和填充可能更复杂。我认为，除非您有设计师为您创建 html，否则最好在代码中定义布局。

【解决方案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}

【讨论】：