样式控制FX面包屑答案

【问题标题】：Styling ControlsFX Breadcrumb样式控制FX面包屑
【发布时间】：2016-10-12 18:37:24
【问题描述】：

我正在使用 ControlsFX 的 BreadcrumbBar，效果很好。我唯一的问题是将它的样式设置为如下图所示。在使用风景视图时，我看到这个组件只有三个类.bread-crumb-bar，.button，.first。我尝试像这样添加边框图像，但没有出现。

/*
 * ControlFX bread crumb
 *   
 */
.bread-crumb-bar {
 }
.bread-crumb-bar .button {
  -fx-padding: 0 3 0 3;
  -fx-border-color: null;
  -fx-border-insets: 0;
  -fx-border-image-source: url("../images/icon/crumb-focused.png");
  -fx-border-image-slice: 1 10 1 10 fill;
  -fx-border-image-width: 1 10 1 10;
  -fx-border-image-repeat: stretch;
}

.bread-crumb-bar .button.first {
}

如何设置控件FX面包屑的样式，使其看起来像图像中的面包屑

【问题讨论】：

标签： css javafx-8 breadcrumbs controlsfx

【解决方案1】：

这就是我解决它的方法非常相似。对于斜线，您需要图像。您需要摆弄填充并适当地设置您的字体系列。没有找到最后/选择的面包屑的选择器。

bread-crumb-bar {
     -fx-background-color: transparent;
}
.bread-crumb-bar .button {
    -fx-padding: 8 12 8 20;
    -fx-border-color: null;
    -fx-border-insets: 0;
    -fx-content-display: left;
    -fx-background-position: left center;
    -fx-background-repeat: no-repeat;
    -fx-background-image: url("../img/slash.png");
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-shape: null;
}
.bread-crumb-bar .first {
    -fx-background-color: transparent ;
    -fx-border-color: transparent;
    -fx-font-size: 1.11em;
    -fx-text-fill: #000;
    -fx-background-image: null;
    -fx-shape: null;
    -fx-padding: 8 12 8 0;
}
.crumb {
    -fx-text-fill: #000;
}
.crumb:hover,
.crumb:selected, 
.crumb:focused
{
    -fx-background-color: rgba(0,0,0,0.1);
    -fx-border-color: null;
    -fx-font-size: 1.11em;
    -fx-text-fill: rgba(0,0,0,0.5);
}

【讨论】：