Question

您希望在标签获得焦点的时候更改标签颜色吗？任何人都可以帮助我自定义标签页以实现此功能。

Answer 1

使用像firebug这样的工具来检查组件的DOM结构是个好主意。例如，在检查Sample中TabSheet示例的DOM结构时，您将看到所有选项卡都具有样式类v-tabsheet-tabitem。如果选择第一个选项卡，它将获得以下样式类“v-tabsheet-tabitemcell”，“v-tabsheet-tabitemcell-first”和“v-tabsheet-tabitemcell-selected-first”。如果选择第二个选项卡，它将获得以下样式类：“v-tabsheet-tabitemcell”和“v-tabsheet-tabitemcell-selected”。正如您将看到的，您需要修改的样式有点依赖于选项卡在选项卡中的位置。

关于更改标签的颜色，让我们看一下所选标签的css。


.v-tabsheet-tabitemcell-selected {
   background-image:url(common/img/vertical-sprites.png);
   background-position:left -1444px;
}

如您所见，实际的CSS并不复杂。然而，css中使用的技术并不常见，它使用了一种优化。所有背景图像都连接在一个单独的png图像中，并调整背景图像的位置，以便我们获得想要显示为背景的图像。您需要做的是创建自己的主题并修改该图像以满足您自己的需求。有关创建自定义主题的更多详细信息，请查看Book of Vaadin。

Answer 2

实际上，您不需要知道技术（CSS精灵）就可以更改选项卡的背景。你只需要使用普通的CSS，不需要任何魔法。

因此，创建一个新的背景图像（纯色是不够的）并将其设置为相关元素的背景。对选项卡中包含的所有相关元素重复（它们也可能指定一些背景）。

如果您想修改Vaadin Reindeer主题中的原始图像，可以在此处找到它们：http://dev.vaadin.com/browser/versions/6.4/WebContent/VAADIN/themes/reindeer/tabsheet/img

如何更改vaadin中的tabbar颜色？

2 个答案: