Commandes de styleFX Breadcrumb

Question

J'utilise BreadcrumbBar de ControlsFX qui fonctionne bien. Le seul problème que j'ai est le style pour ressembler à l'image ci-dessous. En utilisant la vue panoramique j'ai vu que ce composant a seulement trois classes .bread-crumb-bar, .button, .first. J'ai essayé d'ajouter une image de bordure comme ça, mais je ne suis pas apparu.

/* 
* 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 { 
} 

Comment puis-je le style controlsfx pour ressembler Fil d'Ariane Fil d'Ariane dans l'image

Answer 1

Voilà comment je l'ai résolu très similaire. Pour la barre oblique, vous avez besoin de l'image. Vous devez bricoler avec rembourrage et définir votre famille de polices de manière appropriée. N'a pas trouvé un sélecteur pour la dernière/miette sélectionnée.

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