Styling ControlsFX Breadcrumb

Question

ControlsFXのBreadcrumbBarを使用していますが正常に動作します。私が持っている唯一の問題は、以下のイメージのようにスタイリングしていることです。風光明媚なビューを使用するとき、私はこのコンポーネントが3つのクラス、、.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 { 
} 

どのように私は、スタイルcontrolsfxブレッドクラムは、私はそれが非常に似て解決してきた方法です画像

Answer 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); 
}