tabs
Основы
По умолчанию вкладки отображаются в горизонтальном ряду, с надписями, расположенными одна за другой. Этот ряд вкладок обычно располагается в верхней или нижней части связанной области содержимого.
Следующий пример демонстрирует базовую функциональность tabs.
XML код
<tabs id="tabs">
<tab id="tab1" label="Tab One"/>
<tab id="tab2" label="Tab Two"/>
</tabs>В этом примере компонент содержит две вложенные вкладки. Для обновления контента, связанного с выбранной вкладкой, определите обработчик событий, который отслеживает SelectedChangeEvent. При выборе вкладки это событие срабатывает, позволяя соответствующим образом обновить отображаемое содержимое.
Ориентация
Хотя горизонтальная ориентация используется по умолчанию, вертикальная ориентация может быть альтернативным вариантом в некоторых сценариях. Например, при большом количестве вкладок такая ориентация может предоставить дополнительное пространство для их надписей.
Используйте атрибут orientation для изменения ориентации компонента tabs.
Состояния
Вкладка может находиться в одном из состояний: выбрана, не выбрана или отключена:
Эти состояния позволяют пользователям легко определить, какая вкладка активна в данный момент, а какие временно недоступны или отключены.
Надписи
Отдельные вкладки могут содержать практически любые компоненты. Это позволяет создавать визуально отличительные надписи для вкладок:
XML код
<tabs>
<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 для настройки темы компонента.
| Вариант | Описание | Поддерживается в |
|---|---|---|
|
Для отдельного элемента |
Lumo |
|
Размещает вкладки по центру контейнера. |
Lumo |
|
Уменьшает размер вкладок. |
Aura, Lumo |
|
Упрощает визуальный стиль, оставляя акцент только на надписях. |
Lumo |
|
Скрывает кнопки прокрутки для навигации по не помещающимся вкладкам. |
Aura, Lumo |
|
Выделяет одинаковую ширину для всех вкладок и отключает прокрутку. |
Lumo |
Атрибуты
id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - orientation - themeNames - visible - width
Обработчики
|
Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N). |
SelectedChangeEvent
Событие com.vaadin.flow.component.tabs.Tabs.SelectedChangeEvent возникает при выборе другой вкладки.
Пример добавления надписи при выборе вкладки:
@ViewComponent
private VerticalLayout content;
@Subscribe("tabs")
public void onTabsSelectedChange(final Tabs.SelectedChangeEvent event) {
setTabContent(event.getSelectedTab());
}
private void setTabContent(Tab tab) {
content.removeAll();
Div tabLabel = uiComponents.create(Div.class);
if ("tab1".equals(tab.getId().orElse(null))) {
tabLabel.setText("Tab One is selected");
content.add(tabLabel);
} else {
tabLabel.setText("Tab Two is selected");
content.add(tabLabel);
}
}Элементы
|
Для добавления элемента в Jmix Studio:
|
tab
Отдельные вкладки определяются с помощью вложенных элементов tab.
Атрибуты tab
id - ariaLabel - ariaLabelledBy - classNames - colspan - css - enabled - flexGrow - label - themeNames - visible
Обработчки tab
Смотрите также
Дополнительную информацию смотрите в документации Vaadin.