Tab
Компонент v-tabs используется для скрытия содержимого за выбранным элементом. Это также можно использовать в качестве псевдо-навигации для страницы, где вкладки являются ссылками, а вкладками являются содержимое.
API
Класс для активного элемента
Сделайте v-tabs выровненным с заголовком панели инструментов
Центры вкладок
Применяет заданный цвет к элементу управления
Применяет тёмный вариант темы
v-tabs-item min-width 160px (72px mobile), max-width 264px
Components.Tabs.
Установка высоты компонента
Components.Tabs.
Components.Tabs.
Применяет светлый вариант темы
Значение должно быть определено или первое доступное значение будет выбрано
Устанавливает максимальную ширину
Задаёт установленную контрольную точку mobile
Включение множественного выбора. Свойство value принимает массив
Значок правой страницы
Значок левой страницы
Выравнивает вкладки вправо
Components.Tabs.
Components.Tabs.
Контроль видимости
Примеры
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 могут использоваться для применения пользовательских значков разбиения на страницы.