TabsВкладки

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

Использование

При необходимости импортируйте компоненты:

import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';

При необходимости импортируйте типы TypeScript компонентов:

import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';

Пример использования:

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Примеры

Стиль вкладок

Используйте атрибут variant на компоненте <mdui-tabs> для установки стиля вкладок.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" variant="primary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

<mdui-tabs value="tab-1" variant="secondary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Исходный код

Расположение вкладок

Используйте атрибут placement на компоненте <mdui-tabs> для установки расположения вкладок.

top-start

top

top-end

bottom-start

bottom

bottom-end

left-start

left

left-end

right-start

right

right-end

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-select class="example-change-placement" placeholder="Выберите значение placement" style="width: 180px">
  <mdui-menu-item value="top-start">top-start</mdui-menu-item>
  <mdui-menu-item value="top">top</mdui-menu-item>
  <mdui-menu-item value="top-end">top-end</mdui-menu-item>
  <mdui-menu-item value="bottom-start">bottom-start</mdui-menu-item>
  <mdui-menu-item value="bottom">bottom</mdui-menu-item>
  <mdui-menu-item value="bottom-end">bottom-end</mdui-menu-item>
  <mdui-menu-item value="left-start">left-start</mdui-menu-item>
  <mdui-menu-item value="left">left</mdui-menu-item>
  <mdui-menu-item value="left-end">left-end</mdui-menu-item>
  <mdui-menu-item value="right-start">right-start</mdui-menu-item>
  <mdui-menu-item value="right">right</mdui-menu-item>
  <mdui-menu-item value="right-end">right-end</mdui-menu-item>
</mdui-select>

<mdui-tabs value="tab-1" placement="top-start" class="example-placement">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Panel 3</mdui-tab-panel>
</mdui-tabs>

<script>
  const select = document.querySelector(".example-change-placement");
  const tabs = document.querySelector(".example-placement");

  select.addEventListener("change", (event) => {
    tabs.placement = event.target.value;
  });
</script>

Исходный код

Полная ширина

Добавьте атрибут full-width на компоненте <mdui-tabs>, чтобы вкладки занимали всю ширину, равномерно распределяя пространство между ними.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" full-width>
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Исходный код

Иконка

Установите атрибут icon на компоненте <mdui-tab>, чтобы добавить иконку Material Icons на вкладку. Также можно использовать слот icon.

Добавьте атрибут inline, чтобы расположить иконку и текст горизонтально.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1" icon="library_music">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">
    Tab 2
    <mdui-icon slot="icon" name="movie"></mdui-icon>
  </mdui-tab>
  <mdui-tab value="tab-3" icon="menu_book" inline>Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Исходный код

Бейдж

В компоненте <mdui-tab> можно добавить бейдж с помощью слота badge.

Tab 1 99+

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Исходный код

Пользовательское содержимое

Используйте слот custom в компоненте <mdui-tab>, чтобы полностью настроить содержимое вкладки.

Tab 1 Icon

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-chip slot="custom" icon="search">Icon</mdui-chip>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

Исходный код

`mdui-tab-panel` API

Свойства

Атрибут	Свойство	Reflect	Тип	По умолчанию
`value`	`value`		`string`	-
Значение панели вкладки.

Slots

Название
(по умолчанию)
Содержимое панели вкладки.

`mdui-tab` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`value`	`value`	`string`	-
Значение вкладки.
`icon`	`icon`	`string`	-
Имя иконки Material Icons. Можно задать через `slot="icon"`.
`inline`	`inline`	`boolean`	`false`
Определяет, располагать ли иконку и текст в одну линию.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.

Slots

Название
(по умолчанию)
Текстовое содержимое вкладки.
`icon`
Иконка вкладки.
`badge`
Бейдж.
`custom`
Полностью пользовательское содержимое вкладки.

CSS Parts

Название
`container`
Контейнер вкладки.
`icon`
Иконка вкладки.
`label`
Текст вкладки.

`mdui-tabs` API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`variant`	`variant`	`'primary' \| 'secondary'`	`'primary'`
Форма вкладок. Возможные значения: `primary` — подходит для размещения под `<mdui-top-app-bar>` для переключения главных страниц приложения `secondary` — подходит для размещения внутри страницы для переключения группы связанного контента
`value`	`value`	`string`	-
Значение текущей активной вкладки `<mdui-tab>`.
`placement`	`placement`	`'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'top-start'`
Положение вкладок. По умолчанию `top-start`. Возможные значения: `top-start` — сверху, выравнивание по левому краю `top` — сверху, по центру `top-end` — сверху, выравнивание по правому краю `bottom-start` — снизу, выравнивание по левому краю `bottom` — снизу, по центру `bottom-end` — снизу, выравнивание по правому краю `left-start` — слева, выравнивание по верхнему краю `left` — слева, по центру `left-end` — слева, выравнивание по нижнему краю `right-start` — справа, выравнивание по верхнему краю `right` — справа, по центру `right-end` — справа, выравнивание по нижнему краю
`full-width`	`fullWidth`	`boolean`	`false`
Определяет, растягивать ли на всю ширину родительского элемента.

События

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

Slots

Название
(по умолчанию)
Элементы `<mdui-tab>`.
`panel`
Элементы `<mdui-tab-panel>`.

CSS Parts

Название
`container`
Контейнер элементов `<mdui-tab>`.
`indicator`
Индикатор активного состояния.

Предыдущая глава

Switch Переключатель

Следующая глава

TextField Текстовое поле