标题窗格 css 设置

Titled pane css settings

提问by Alberto acepsut

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

我想知道如何将 CSS 设置应用于 a TitledPane，但找不到任何示例

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

我想为TitledPane工具栏和背景应用自定义设置，但这不起作用

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

回答by Anshul Parashar

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

标题窗格的默认 css...根据您的需要更改它。

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

回答by siddharth gupta

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       

回答by Markus Weninger

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

可以在此处找到CSS 样式标题窗格的官方文档（请参阅 @siddharth gupta 关于可能属性的回答）。

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

您可以考虑仅设置某个子组件的样式，例如.titled-pane > .title > .text. 标题窗格具有以下布局：

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

• 标题窗格 - TitledPane
  • 标题 - HBox
    • 文本 - Label
    • 箭头按钮— StackPane
      • 箭 - StackPane
  • 内容 - StackPane

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

这是TitledPane'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 */
}