JavaFx - увеличить расстояние между текстом и краем области заголовка вкладки

1

Я не могу понять, какой элемент я должен использовать для выполнения этой задачи. Я попробовал

.tab-header-area .tab{
    -fx-background-color:red;
    -fx-padding:30px;
}

РЕДАКТИРОВАТЬ 1
Это то, что я получаю Изображение 174551

Но у меня такой же заголовок вкладки внутри большого красного прямоугольника. Как увеличить расстояние между текстом и краем области заголовка вкладки? Другими словами - как я могу сделать заголовок вкладки больше с тем же размером шрифта?

РЕДАКТИРОВАТЬ 2
Когда я делаю

.tab-header-area .tab .label{
    -fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
    -fx-background-color: red ;
}

Получаю: Изображение 174551

Но мне нужно (извините, это gimp, а не фотошоп) Изображение 174551

  • 0
    Можете ли вы опубликовать изображение того, как оно выглядит, и (если возможно), как бы вы хотели, чтобы оно выглядело?
  • 0
    @James_D См редактировать 1
Теги:
javafx

2 ответа

3
Лучший ответ

Если вам нужна рамка вокруг вкладки (а не метка), вы должны использовать это:

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: red;
    -fx-padding: 20px;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

Изображение 174551

Если вы хотите манипулировать контейнером табуляции (где находится метка), вам нужно следующее:

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

Изображение 174551

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

Изображение 174551

Посмотрите файл modena.css(таблица стилей JavaFX по умолчанию) для информации о вещах, которые нужно изменить.

Размер шрифта не изменится динамически, вы должны позаботиться о размере шрифта со слушателем по размеру/ширине/высоте свойства вкладки (относительно размера шрифта).

И есть много псевдо-тегов, таких как .tab: selected.tab: top и т.д. Знайте об этом, если хотите, чтобы поведение по умолчанию только с новым дизайном.

И, наконец, посмотрим на селектора css, вы пропустили нисходящие селекторы (' > '): http://www.w3schools.com/cssref/sel_element_gt.asp

Поделиться
  • 0
    Прямоугольник - это не произвольный прямоугольник, а прямоугольник фокуса.
  • 0
    Я не могу понять твой код. В обоих кодах есть черная граница. Не должно быть никаких пользовательских границ.
Показать ещё 3 комментария
1

Не совсем понятно, что вы ищете... возможно

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 ;
}
Поделиться
  • 0
    Но когда вкладка сфокусирована, как сделать так, чтобы граница была не по центру, а по краю заголовка вкладки? Я имею в виду границы, чтобы вести себя одинаково, только для большого заголовка вкладки?
  • 0
    Я имею в виду, что основная часть должна быть не по центру, но она должна быть шириной заголовка вкладки. Текст слева, кнопка закрытия справа.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню