Tab

Компонент v-tabs используется для скрытия содержимого за выбранным элементом. Это также можно использовать в качестве псевдо-навигации для страницы, где вкладки являются ссылками, а вкладками являются содержимое.

API

Имя
active-class
По умолчанию
'v-tabs__item--active'
Тип
string

Класс для активного элемента

Имя
align-with-title
По умолчанию
false
Тип
boolean

Сделайте v-tabs выровненным с заголовком панели инструментов

Имя
centered
По умолчанию
false
Тип
boolean

Центры вкладок

Имя
color
По умолчанию
undefined
Тип
string

Применяет заданный цвет к элементу управления

Имя
dark
По умолчанию
false
Тип
boolean

Применяет тёмный вариант темы

Имя
fixed-tabs
По умолчанию
false
Тип
boolean

v-tabs-item min-width 160px (72px mobile), max-width 264px

Имя
grow
По умолчанию
false
Тип
boolean

Components.Tabs.

Имя
height
По умолчанию
undefined
Тип
number | string

Установка высоты компонента

Имя
hide-slider
По умолчанию
false
Тип
boolean

Components.Tabs.

Имя
icons-and-text
По умолчанию
false
Тип
boolean

Components.Tabs.

Имя
light
По умолчанию
false
Тип
boolean

Применяет светлый вариант темы

Имя
mandatory
По умолчанию
true
Тип
boolean

Значение должно быть определено или первое доступное значение будет выбрано

Имя
max
По умолчанию
undefined
Тип
number | string

Устанавливает максимальную ширину

Имя
mobile-break-point
По умолчанию
1264
Тип
number | string

Задаёт установленную контрольную точку mobile

Имя
multiple
По умолчанию
false
Тип
boolean

Включение множественного выбора. Свойство value принимает массив

Имя
next-icon
По умолчанию
'$vuetify.icons.next'
Тип
string

Значок правой страницы

Имя
prev-icon
По умолчанию
'$vuetify.icons.prev'
Тип
string

Значок левой страницы

Имя
right
По умолчанию
false
Тип
boolean

Выравнивает вкладки вправо

Имя
show-arrows
По умолчанию
false
Тип
boolean

Components.Tabs.

Имя
slider-color
По умолчанию
'accent'
Тип
string

Components.Tabs.

Имя
value
По умолчанию
undefined
Тип
number | string

Контроль видимости

Примеры

Fixed tabs

fixed-tabs prop устанавливает более высокую минимальную ширину и применяет новую максимальную ширину к v-tabs-items. На desktop screens элементы вкладки будут центрироваться в компоненте v-tabs и переключаться на равномерное заполнение на мобильном устройстве.

Выровненные справа tabs

right prop выравнивает tabs вправо

Контент

Вкладки - это не единственное, что можно добавить в компонент v-tabs. В этом примере мы также добавили панель инструментов.

С поиском

Вот ещё один пример дополнительного содержимого внутри компонента v-tabs.

Иконки и текст

Используя icons-and-text prop, вы можете добавлять значки к каждому элементу табуляции.

Desktop tabs

Выровнять вкладки с заголовком панели инструментов

Создайте v-tabs, выровненные с компонентом v-toolbar-title (v-toolbar-side-icon или v-btn должны использоваться в v-toolbar). Может не работать, если текст вкладки завернут.

Grow

grow prop сделают элементы вкладки заняты всем доступным пространством.

С меню

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

Pagination

Если элементы табуляции переполняют свой контейнер, появятся элементы управления разбиением на страницы.

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

prev-icon и next-icon могут использоваться для применения пользовательских значков разбиения на страницы.

Edit this page | language on Github