tabs

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

XML-элемент

tabs

Java-класс

Tabs

Основы

ДЕМО

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

Следующий пример демонстрирует базовую функциональность tabs.

<tabs width="100%">
    <tab id="issueTab" label="Issues"/>
    <tab id="featureTab" label="Features"/>
    <tab id="bugTab" label="Bugs"/>
</tabs>

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

Ориентация

ДЕМО

Хотя по умолчанию используется горизонтальная ориентация, в некоторых случаях удобнее вертикальная. Например, при большом количестве вкладок она оставляет больше места для подписей.

Используйте атрибут orientation для изменения ориентации компонента tabs.

XML
<checkbox id="orientationCheckbox" label="Vertical"/>
<tabs id="tabs" width="100%">
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>
Java
@ViewComponent
protected Tabs tabs;

@Subscribe("orientationCheckbox")
protected void onOrientationCheckboxValueChane(ComponentValueChangeEvent<JmixCheckbox, Boolean> event) {
    tabs.setOrientation(event.getValue() ? Tabs.Orientation.VERTICAL : Tabs.Orientation.HORIZONTAL);
}

Состояния

ДЕМО

Вкладка tab может быть выбранной, невыбранной или отключённой:

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

XML
<tabs id="tabs" width="100%">
    <tab id="tab1" label="Selected"/>
    <tab id="tab2" label="Unselected"/>
    <tab id="tab3" label="Disabled" enabled="false"/>
</tabs>
Java
@Subscribe("tabs")
protected void onTabsSelectChangeEvent(Tabs.SelectedChangeEvent event) {
    event.getPreviousTab().setLabel("Unselected");
    event.getSelectedTab().setLabel("Selected");
}

Надписи

ДЕМО

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

<tabs id="tabs" width="100%">
    <tab id="profileTab">
        <icon icon="USER"/>
        <span text="Profile"/>
    </tab>
    <tab id="notificationsTab">
        <icon icon="BELL"/>
        <span text="Notifications"/>
    </tab>
    <tab id="settingsTab">
        <icon icon="COG"/>
        <span text="Settings"/>
    </tab>
</tabs>

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

ДЕМО

Используйте атрибут 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

Атрибуты

tabs имеет следующие уникальные атрибуты:

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

orientation

Определяет ориентацию вкладок.

—

tabs имеет следующие общие атрибуты:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Обработчики

tabs имеет следующие уникальные обработчики:

Имя Описание

SelectedChangeEvent

com.vaadin.flow.component.tabs.Tabs.SelectedChangeEvent запускается при выборе другой вкладки.

tabs имеет следующие общие обработчики:

AttachEvent - DetachEvent

Элементы

Для добавления элемента в Jmix Studio:

  1. Выберите компонент в XML-дескрипторе экрана или панели Jmix UI Structure

  2. Нажмите кнопку Add в панели Component Inspector

tab

Отдельные вкладки определяются с помощью вложенных элементов tab.

tab attributes

id - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - flexGrow - label - themeNames - visible

tab handlers

AttachEvent - DetachEvent

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