tabSheet

tabSheet организует содержимое по вкладкам и отображает по одной вкладке за раз.

XML-элемент

tabSheet

Java-класс

JmixTabSheet

Основы

ДЕМО

Добавьте элементы tab в tabSheet. Каждая вкладка принимает один компонент содержимого. Несколько компонентов поместите в контейнер, например vbox.

Следующий пример демонстрирует создание базового tabSheet:

<tabSheet width="100%">
    <tab id="tab1" label="Tab 1">
        <vbox>
            <span text="Span 1"/>
            <textField label="TextField 1"/>
            <button text="Button 1"/>
        </vbox>
    </tab>
    <tab id="tab2" label="Tab 2">
        <vbox>
            <span text="Span 2"/>
            <textField label="TextField 2"/>
            <button text="Button 2"/>
        </vbox>
    </tab>
</tabSheet>

Количество вкладок

Если надписи вкладок не помещаются по доступной ширине, на панели появляются кнопки прокрутки, с помощью которых можно открыть остальные вкладки.

tabsheet tabs number

Состояния

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

tabs states

Пользовательские надписи

ДЕМО

Создайте Tab программно, чтобы использовать рядом с текстовой надписью другие компоненты, например значки. В примере создаются три надписи из значка и текста. В теме Lumo значки можно расположить над текстом.

XML
<layout>
    <!-- theme-only:lumo -->
    <checkbox id="iconControlCheckbox" label="Icon on top"/>
    <!-- theme-only:lumo:end -->
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createProfileTab(), new Span("Profile tab content"));
    tabSheet.add(createNotificationsTab(), new Span("Notifications tab content"));
    tabSheet.add(createSettingsTab(), new Span("Settings tab content"));
}
// theme-only:lumo
@Subscribe("iconControlCheckbox")
protected void onIconControlCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    if (event.getValue()) {
        tabSheet.getChildren().forEach(tab -> ((Tab) tab).addThemeVariants(TabVariant.LUMO_ICON_ON_TOP));
    } else {
        tabSheet.getChildren().forEach(tab -> tab.getElement().getThemeList().clear());
    }
}
// theme-only:lumo:end

protected Tab createProfileTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.USER.create(), new Text("Profile"));

    return tab;
}

protected Tab createNotificationsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.BELL.create(), new Text("Notifications"));

    return tab;
}

protected Tab createSettingsTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(VaadinIcon.COG.create(), new Text("Settings"));

    return tab;
}

Бейджи

ДЕМО

Бейджи в надписях вкладок могут показывать количество элементов, уведомления или другую краткую информацию о состоянии. В примере каждая надпись состоит из текста и оформленного темой span со счётчиком.

XML
<layout classNames="tab-sheet-badges">
    <tabSheet id="tabSheet" width="100%"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    initTabSheet();
}

protected void initTabSheet() {
    tabSheet.add(createIssueTab(), new Span("Issue tab content"));
    tabSheet.add(createFeatureTab(), new Span("Feature tab content"));
    tabSheet.add(createBugTab(), new Span("Bug tab content"));
}

protected Tab createIssueTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Issues"), createBadge(15, "contrast"));

    return tab;
}

protected Tab createFeatureTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Features"), createBadge(132, "success"));

    return tab;
}

protected Tab createBugTab() {
    Tab tab = uiComponents.create(Tab.class);
    tab.add(new Span("Bugs"), createBadge(32, "error"));

    return tab;
}

protected Span createBadge(int value, String theme) {
    Span badge = new Span(String.valueOf(value));
    badge.getElement().getThemeList().add("badge small " + theme);
    badge.addClassName("tab-badge");
    return badge;
}

Ленивые вкладки

ДЕМО

Ленивая вкладка создаёт содержимое только при выборе, поэтому при открытии экрана создаётся меньше компонентов. В примере экземпляры LazyComponent добавляются программно, а изменения выбранной вкладки отслеживаются, чтобы показать момент создания содержимого.

XML
<layout>
    <tabSheet id="tabSheet" width="100%" themeNames="bordered">
        <tab id="tab1" label="Tab 1">
            <vbox>
                <span text="Span 1"/>
                <textField label="TextField 1"/>
                <button text="Button 1"/>
            </vbox>
        </tab>
    </tabSheet>
    <span text="Created content:"/>
    <span id="spanInfo"/>
</layout>
Java
@ViewComponent
protected JmixTabSheet tabSheet;
@ViewComponent
protected Span spanInfo;

@Autowired
protected UiComponents uiComponents;

@Subscribe
protected void onInit(InitEvent event) {
    tabSheet.add("LazyTab 1", new LazyComponent(this::getLazyTabContent));
    tabSheet.add("LazyTab 2", new LazyComponent(this::getLazyTabContent));

    checkComponents();
    tabSheet.addSelectedChangeListener(e -> checkComponents());
}

protected Component getLazyTabContent() {
    VerticalLayout content = uiComponents.create(VerticalLayout.class);

    Span info = uiComponents.create(Span.class);
    info.setText("Lazy Span");

    TypedTextField<String> textField = uiComponents.create(TypedTextField.class);
    textField.setLabel("Lazy textField");

    JmixButton button = uiComponents.create(JmixButton.class);
    button.setText("Lazy button");

    content.add(info, textField, button);
    return content;
}

protected void checkComponents() {
    StringBuilder sb = new StringBuilder("Tab 1 = ");
    List<Component> tab1Content = tabSheet.getContentByTab(tabSheet.getTabAt(0)).getChildren().toList();
    sb.append(tab1Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 1 = ");
    List<Component> tab2Content = tabSheet.getContentByTab(tabSheet.getTabAt(1)).getChildren().toList();
    sb.append(tab2Content.isEmpty() ? "null" : "true");

    sb.append(", LazyTab 2 = ");
    List<Component> tab3Content = tabSheet.getContentByTab(tabSheet.getTabAt(2)).getChildren().toList();
    sb.append(tab3Content.isEmpty() ? "null" : "true");

    spanInfo.setText(sb.toString());
}

Варианты темы

ДЕМО

Используйте атрибут themeNames, чтобы настроить тему компонента.

Вариант Описание Поддерживается в

icon-on-top

Для отдельного элемента tab располагает значок над текстом метки. Установите themeNames="icon-on-top" у tab.

Lumo

centered

Размещает вкладки по центру контейнера.

Lumo

small

Уменьшает размер вкладок.

Aura, Lumo

minimal

Упрощает визуальный стиль, оставляя акцент только на надписях.

Lumo

hide-scroll-buttons

Скрывает кнопки прокрутки для навигации по не помещающимся вкладкам.

Aura, Lumo

equal-width-tabs

Выделяет одинаковую ширину для всех вкладок и отключает прокрутку.

Lumo

bordered

Добавляет границу вокруг вкладок и области содержимого.

Lumo

no-padding

Удаляет стандартные внутренние отступы из области содержимого.

Aura, Lumo

no-border

Удаляет границу вокруг tabSheet.

Aura

Атрибуты

Общие атрибуты применяются к tabSheet и его элементам tab. Следующий атрибут относится только к tab:

Имя Описание По умолчанию

lazy

Откладывает создание содержимого вкладки до её выбора.

false

Обработчики

Имя Описание

AttachEvent

Срабатывает при присоединении tabSheet или tab к UI.

DetachEvent

Срабатывает при отсоединении tabSheet или tab от UI.

SelectedChangeEvent

Срабатывает при изменении выбранной вкладки.

Элементы

tabSheet содержит элементы tab. Каждый tab принимает один компонент содержимого и может содержать вложенный элемент tooltip.

Смотрите также