JavaFX CSS Tab botão "X"

Programação Java
, , ,
#1

Olá. Gostaria de saber se alguém pode me dar um exemplo de como formatar o botão “x” das Tabs do JavaFX. Gostaria de fazer um botão redondo e flat semelhante ao estilo do Mac.

#2

Olá, você terá que alterar o seguinte estilo:

Esse é o estilo que está no arquivo de estilos padrão do javafx (modena.css) achei Aqui, mas este estilo está incluso no seu JDK, no arquivo jfxrt.jar.

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-close-button {
-fx-background-color: -fx-mark-color;
-fx-shape: "M 0,0 H1 L 4,3 7,0 H8 V1 L 5,4 8,7 V8 H7 L 4,5 1,8 H0 V7 L 3,4 0,1 Z";
-fx-scale-shape: false;
-fx-effect: dropshadow(two-pass-box , rgba(255, 255, 255, 0.4), 1, 0.0 , 0, 1);
}

Perceba o atributo -fx-shape, basicamente ele determina o formato do botão, que nesse caso é um x, para alterá-lo você tem duas opções simples:

1 - Utilizar um outro shape, exemplo:
“M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z”, o shape é a representação de um SVG, procure sites que disponibilizem imagens nesse formato, como esse: https://materialdesignicons.com/.

2 - Setar o shape do botão como null e utilizar o atributo -fx-background-image para especificar a imagem do botão.

Apliquei o seguinte estilo na minha tab:

.tab .tab-close-button {
-fx-background-color: #ff3333;
-fx-shape: "M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"; 
}

.tab .tab-close-button:armed {
-fx-background-color: #ff9999;
}

.tab .tab-close-button:hover {
-fx-background-color: #cc0033;
}
1 curtida