Я не могу понять, какой элемент я должен использовать для выполнения этой задачи. Я попробовал
.tab-header-area .tab{
-fx-background-color:red;
-fx-padding:30px;
}
РЕДАКТИРОВАТЬ 1
Это то, что я получаю
Но у меня такой же заголовок вкладки внутри большого красного прямоугольника. Как увеличить расстояние между текстом и краем области заголовка вкладки? Другими словами - как я могу сделать заголовок вкладки больше с тем же размером шрифта?
РЕДАКТИРОВАТЬ 2
Когда я делаю
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
Получаю:
Но мне нужно (извините, это gimp, а не фотошоп)
Если вам нужна рамка вокруг вкладки (а не метка), вы должны использовать это:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-color: red;
-fx-padding: 20px;
-fx-border-color: black;
-fx-border-width: 1px;
}
Если вы хотите манипулировать контейнером табуляции (где находится метка), вам нужно следующее:
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{
-fx-border-color: black;
-fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
UPDATE
Значение по умолчанию для выбранной вкладки таково:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
И это как оно выглядит:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-padding: 20px;
-fx-background-color: red;
-fx-border-width: 1px;
-fx-border-color: black;
}
.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
-fx-border-width: 0px;
}
Посмотрите файл modena.css(таблица стилей JavaFX по умолчанию) для информации о вещах, которые нужно изменить.
Размер шрифта не изменится динамически, вы должны позаботиться о размере шрифта со слушателем по размеру/ширине/высоте свойства вкладки (относительно размера шрифта).
И есть много псевдо-тегов, таких как .tab: selected.tab: top и т.д. Знайте об этом, если хотите, чтобы поведение по умолчанию только с новым дизайном.
И, наконец, посмотрим на селектора css, вы пропустили нисходящие селекторы (' > '): http://www.w3schools.com/cssref/sel_element_gt.asp
Не совсем понятно, что вы ищете... возможно
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
public class TabPaneStyleTest extends Application {
@Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab();
tab1.setGraphic(new Label("tab 1"));
Tab tab2 = new Tab();
tab2.setGraphic(new Label("tab 2"));
tabPane.getTabs().addAll(tab1, tab2);
Scene scene = new Scene(tabPane);
scene.getStylesheets().add("tab-pane-big-tabs.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
с файлом css
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}