当前位置：文江博客话题详情

如何更改 vaadin 中标签栏的颜色？

发布于 2024-08-19 02:55:32 字数 65 浏览 0 评论 0原文

您好，当选项卡在 vaadin 中获得焦点时，想更改选项卡颜色吗？任何人都可以帮助我如何自定义选项卡来实现这一目标。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪 2024-08-26 02:55:32

最好使用像 firebug 这样的工具来检查组件的 DOM 结构。例如，当检查示例中 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 了解有关创建自定义主题的更多详细信息。

It's a good idea to use a tool like firebug to inspect the DOM structure of the components. For example, when inspecting the DOM structure of the TabSheet example in the Sample, you will see that all tab has the style class v-tabsheet-tabitem. If you select the first tab, it will get the following style class "v-tabsheet-tabitemcell", "v-tabsheet-tabitemcell-first" and "v-tabsheet-tabitemcell-selected-first". If you select the second tab, it will get the following style classes: "v-tabsheet-tabitemcell" and "v-tabsheet-tabitemcell-selected". As you will see, the styles you need to modify are a bit dependent on the tab's position in the tabsheet.

About changing the color of the tab, let's take a look at the selected tab's css.


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

As you can see, the actual css is not complicated. The technique used in the css is however a not so common, it uses a sort of optimization. All the background images are joined in one single png image and the background image's position is adjusted so that we get the image we want to show as the background. What you need to do, is to create your own theme and modify that image to suite your own needs. Check the Book of Vaadin for more details about creating custom themes.

回复收藏 0 原文