java - 如何使用 CSS 更改controlsfx SegmentedButton 的边框？

Question

SegmentedButton

我正在尝试向 ControlsFX SegmentedButton 添加边框。当我更改背景颜色时，它们保持正确的形状，如上图所示。

这是 CSS:

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
}

.segmented-button:selected{
    -fx-background-color: -color-heading-dark-blue;
    -fx-text-fill: white; 
 }

但是当我尝试添加边框时，形状不被遵守。 SegmentedButton with Border

这是 CSS:

.segmented-button{
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
    -fx-background-color:  -color-background-light-purple;
    -fx-border-color: -color-heading-dark-blue;
    -fx-border-width: 0.2;
}

有人可以告诉我如何添加边框以保持 SegmentedButton 内每个按钮的形状吗？

Answer 1

ControlsFX-SegmentedButton 包含 ToggleButton，因此您必须使用 .segmented-button .toggle-button {...} 将样式分配给 ToggleButton。

例如:

 .segmented-button .toggle-button {
     -fx-background-color: derive(STEELBLUE,30%);
     -fx-border-color: derive(STEELBLUE,0%);
     -fx-border-width: 2;
 }

 .segmented-button .toggle-button:selected,
 .segmented-button .toggle-button:focused {
     -fx-background-color: derive(STEELBLUE,-10%);
     -fx-border-color: derive(STEELBLUE,-40%);
     -fx-border-width: 2;
     -fx-text-fill: WHITE;  
 }

结果:

部分

 .segmented-button {
     -fx-background-color: derive(ORANGE,30%);
     -fx-border-color: derive(ORANGE,0%);
     -fx-border-width: 10
 }

仅设置 SegmentedButton(即容器)本身的样式:

编辑:

您可以使用

来区分左、中、右按钮

.segmented-button .toggle-button.left-pill {...}

.segmented-button .toggle-button.center-pill {...}

.segmented-button .toggle-button.right-pill {...}

按钮的不同样式(例如圆 Angular )。半径可以像往常一样使用 -fx-background-radius 设置。这允许外部按钮具有以下圆 Angular 样式(与您的类似):

ControlsFX 的 SegmentedButton.css 是自定义样式的一个很好的蓝图。您可以在 org\controlsfx\control\segmentedbutton.css 的controlsfx-9.0.0.jar 中找到它。