Как мне изменить границы элемента управления SegmentedButton с помощью CSS? - PullRequest
Новая
       10

Как мне изменить границы элемента управления SegmentedButton с помощью CSS?

0 голосов
/ 12 октября 2018

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?

1 Ответ

0 голосов
/ 12 октября 2018

ControlsFX-SegmentedButton содержит ToggleButton, и, таким образом, вы должны назначить свой стиль для ToggleButton с помощью кнопки .segmented-button .toggle-button {...}.

Например: 

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

приводит к:

enter image description here

Порция 

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

просто стилизует саму сегментированную кнопку (т. Е. Контейнер):

enter image description here

РЕДАКТИРОВАТЬ:

Выможет различать левую, промежуточную и правую кнопки с помощью

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

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

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

для различных стилей кнопок (например, закругленные углы).Радиус может быть установлен как обычно с -fx-background-radius.Это позволяет использовать следующий стиль с закругленными углами для внешних кнопок (аналогично вашим):

enter image description here

Хорошей схемой для пользовательского стиля является SegmentedButton.CSS ControlsFX.Вы можете найти его в файле controlsfx-9.0.0.jar по адресу org \ controlsfx \ control \ segmentedbutton.css.

...