Titled pane css settings

问题:

I wonder how to apply CSS settings to a TitledPane, but can't find any example

I would like to apply custom settings for TitledPane toolbar and background, but this does not work

.titled-pane {     -fx-background-color: linear-gradient(aliceblue, lightslategray); } 

回答1:

Default css titled pane...change it according your need.

.titled-pane  { -fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin";     -fx-text-fill: -fx-text-base-color; } .titled-pane:focused  { -fx-text-fill: white; } .titled-pane > .title  { -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ }  .titled-pane:focused > .title  { -fx-color: -fx-focus-color; }  .titled-pane > .title > .arrow-button  { -fx-background-color: null; -fx-background-insets: 0; -fx-background-radius: 0; -fx-padding: 0.0em 0.25em 0.0em 0.0em; /* 0 3 0 0 */ }  .titled-pane > .title > .arrow-button .arrow  { -fx-background-color: -fx-mark-highlight-color, -fx-mark-color; -fx-background-insets: 1 0 -1 0, 0; -fx-padding: 0.25em 0.3125em 0.25em 0.3125em; /* 3 3.75 3 3.75 */ -fx-shape: "M 0 0 h 7 l -3.5 4 z"; }  .titled-pane:collapsed > .title > .arrow-button .arrow  { -fx-rotate: -90; }  .titled-pane > *.content  { -fx-background-color: -fx-box-border, linear-gradient(to bottom, derive(-fx-color,-02%), derive(-fx-color,65%) 12%,      derive(-fx-color,23%) 88%, derive(-fx-color,50%) 99%, -fx-box-border); -fx-background-insets: 0, 0 1 1 1; -fx-padding: 0.167em;  }  .titled-pane:focused > .title > .arrow-button .arrow  { -fx-background-color: white; } 

回答2:

Only the following properties are available for titled pane( which include all labeled properties and font properties)

extra properties

            -fx-animated                  -fx-collapsible 

labeled properties

            -fx-alignment                -fx-text-alignment               -fx-text-overrun                      -fx-wrap-text                -fx-font                 -fx-underline                 -fx-graphic                       -fx-content-display                       -fx-graphic-text-gap                      -fx-label-padding                     -fx-text-fill                     -fx-ellipsis-strin 

font properties

               -fx-font                     -fx-font-family                       -fx-font-size                         -fx-font-style                    -fx-font-weight        

回答3:

The official documentation for CSS styling Titled Panes can be found here (see @siddharth gupta's answer regarding possible properties).

You may consider to style only a certain sub-component, e.g., .titled-pane > .title > .text. Titled panes have the following layout:

• titled-pane - TitledPane
  • title ― HBox
    • text ― Label
    • arrow-button ― StackPane
      • arrow ― StackPane
  • content ― StackPane

Here is the default formatting for the TitledPane's "header":

.titled-pane > .title  {     -fx-background-color: -fx-box-border, -fx-inner-border, -fx-body-color;     -fx-background-insets: 0, 1, 2;     -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;     -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em; /* 2 10 3 10 */ } 

文章来源: Titled pane css settings