在 javafx 中创建类似 opera 的选项卡

发布于 2024-12-21 19:22:59 字数 90 浏览 1 评论 0原文

我想在我的 JavaFx 2.0 应用程序中创建类似 Opera Web 浏览器的选项卡。我尝试使用许多 CSS 设置来自定义选项卡,但没有成功。有人知道该怎么做吗?

I want to create tabs like opera web browser in my JavaFx 2.0 App. I tried to customize the tab with many CSS settings, but didn't succeed. Does anybody know how to do that?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

他夏了夏天 2024-12-28 19:22:59

您可以向单个选项卡添加一个类来设置其样式,如下所示:

.blue .tab-label  {
  -fx-text-fill: blue;  
}

.red .tab-label  {
 -fx-text-fill: red;  
}

.green .tab-label {
-fx-text-fill: lime;  
}

要设置所有选项卡的样式,您可以使用如下 CSS:

.tab-chat.tab:hover {
-fx-background-color:  linear-gradient(to top, -fx-purple, -fx-control-inner-background);
}

.tab-chat:selected {
-fx-background-color: linear-gradient(to bottom, derive(-fx-base, 95%),     -fx-control-inner-background );
-fx-background-insets: 0, 9 9 0 9;
-fx-background-radius: 12 12 0 0, 12 12 0 0;
-fx-font-weight: bold;
}

/* ----------------------------- */
/*  Tabs  background graphic     */
/* ----------------------------- */
.tab-header-background {
   -fx-background-image: url("images/back-rustyfill.jpg");
} 

You can add a class to an individual Tab to style it, like this:

.blue .tab-label  {
  -fx-text-fill: blue;  
}

.red .tab-label  {
 -fx-text-fill: red;  
}

.green .tab-label {
-fx-text-fill: lime;  
}

And to style all tabs you can use a CSS like this:

.tab-chat.tab:hover {
-fx-background-color:  linear-gradient(to top, -fx-purple, -fx-control-inner-background);
}

.tab-chat:selected {
-fx-background-color: linear-gradient(to bottom, derive(-fx-base, 95%),     -fx-control-inner-background );
-fx-background-insets: 0, 9 9 0 9;
-fx-background-radius: 12 12 0 0, 12 12 0 0;
-fx-font-weight: bold;
}

/* ----------------------------- */
/*  Tabs  background graphic     */
/* ----------------------------- */
.tab-header-background {
   -fx-background-image: url("images/back-rustyfill.jpg");
} 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文