Vuetify

Магазин

Для бизнеса

The v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

The v-tabs component is a styled extension of v-item-group. It provides an easy to use interface for organizing groups of content.

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

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

Active tab is always centered

The v-tabs-items component allows for you to customize the content per tab. Using a shared v-model, the v-tabs-items will sync with the currently selected v-tab.

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

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

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

Tabs can be toggled to stack its v-tab components vertically.

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

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

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

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

Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs component will react. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all v-tabs and the slider will disappear.

You can represent v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.

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

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!