java GWT DecoratedTabPanel 选项卡按钮颜色

GWT DecoratedTabPanel tab button color

提问by kaboom

how can I change the color of a tab in a DecoratedTabPanel? I don't mean the content but the button you click on to select a tab.

如何更改 DecoratedTabPanel 中选项卡的颜色？我指的不是内容，而是您单击以选择选项卡的按钮。

回答by

What you want to do is Change the CSS of GWT tabBar Items. I think the following piece of CSS code will do in your specific situation.

您要做的是更改 GWT tabBar Items 的 CSS。我认为以下 CSS 代码将适用于您的特定情况。

.gwt-DecoratedTab*Bar* .gwt-TabBarItem  { background:#FF0; }

Also, have a look at this siteand this reference.

另外，看看这个站点和这个参考。

回答by Michael

As far as I can tell there really isn't an easy way to do this. Because decorated tab panels use layers of nested tables to get the fancy rounded corners, it looks like you'll need to change everything andmake your own rounded corners in order to change the color of a tab.

据我所知，确实没有一种简单的方法可以做到这一点。因为装饰选项卡面板使用嵌套表格层来获得花哨的圆角，所以看起来您需要更改所有内容并制作自己的圆角以更改选项卡的颜色。

Here's the GWT default styles for tabs. It should be pretty obvious what you need to override in your style sheet to obtain the desired effect (look for the bg colors).

这是选项卡的 GWT 默认样式。很明显，您需要在样式表中覆盖什么才能获得所需的效果（寻找 bg 颜色）。

.gwt-TabBar {
}
.gwt-TabBar .gwt-TabBarFirst {
 width: 5px; /* first tab distance from the left */
}
.gwt-TabBar .gwt-TabBarRest {
}
.gwt-TabBar .gwt-TabBarItem {
 margin-left: 6px;
 padding: 3px 6px 3px 6px;
 cursor: pointer;
 cursor: hand;
 color: black;
 font-weight: bold;
 text-align: center;
 background: #d0e4f6;
}
.gwt-TabBar .gwt-TabBarItem-selected {
 cursor: default;
 background: #92c1f0;
}
.gwt-TabBar .gwt-TabBarItem-disabled {
 cursor: default;
 color: #999999;
}
.gwt-TabPanel {
}
.gwt-TabPanelBottom {
 border-color: #92c1f0;
 border-style: solid;
 border-width: 3px 2px 2px;
 overflow: hidden;
 padding: 6px;
}

.gwt-DecoratedTabBar {
}
.gwt-DecoratedTabBar .gwt-TabBarFirst {
 width: 5px; /* first tab distance from the left */
}
.gwt-DecoratedTabBar .gwt-TabBarRest {
}
.gwt-DecoratedTabBar .gwt-TabBarItem {
 border-collapse: collapse;
 margin-left: 6px;
}
.gwt-DecoratedTabBar .tabTopCenter {
 padding: 0px;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .tabTopLeft,
.gwt-DecoratedTabBar .tabTopRight {
 padding: 0px;
 zoom: 1;
}
.gwt-DecoratedTabBar .tabTopLeftInner,
.gwt-DecoratedTabBar .tabTopRightInner {
 width: 6px;
 height: 6px;
}
.gwt-DecoratedTabBar .tabTopLeft {
 background: url(images/corner.png) no-repeat 0px -55px;
 -background: url(images/corner_ie6.png) no-repeat 0px -55px;
}
.gwt-DecoratedTabBar .tabTopRight {
 background: url(images/corner.png) no-repeat -6px -55px;
 -background: url(images/corner_ie6.png) no-repeat -6px -55px;
}
* html .gwt-DecoratedTabBar .tabTopLeftInner,
* html .gwt-DecoratedTabBar .tabTopRightInner {
 width: 6px;
 height: 6px;
 overflow: hidden;
}
.gwt-DecoratedTabBar .tabMiddleLeft,
.gwt-DecoratedTabBar .tabMiddleRight {
 width: 6px;
 padding: 0px;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .tabMiddleLeftInner,
.gwt-DecoratedTabBar .tabMiddleRightInner {
 width: 1px;
 height: 1px;
}
.gwt-DecoratedTabBar .tabMiddleCenter {
 padding: 0px 4px 2px 4px;
 cursor: pointer;
 cursor: hand;
 color: black;
 font-weight: bold;
 text-align: center;
 background: #d0e4f6;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopCenter {
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopLeft {
 background-position: 0px -61px;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabTopRight {
 background-position: -6px -61px;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleLeft,
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleRight {
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-selected .tabMiddleCenter {
 cursor: default;
 background: #92c1f0;
}
.gwt-DecoratedTabBar .gwt-TabBarItem-disabled .tabMiddleCenter {
 cursor: default;
 color: #999999;
}