Табы

Компактная segmented-навигация для переключения между представлениями.

Установка

npx alixan-ui-nuxt add tabs

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

<script setup lang="ts">
const tabs = ['Account', 'Password']
const selected = ref(0)
</script>

<template>
  <div class="grid gap-4">
    <Tabs v-model="selected" :tabs="tabs" design="cupertino" />
    <Tabs v-model="selected" :tabs="tabs" design="material" />
  </div>
</template>

На всю ширину

<template>
  <Tabs v-model="selected" :tabs="tabs" full />
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
modelValue	number	0	Индекс выбранного tab, используемый через v-model.
tabs	string[]	[]	Список labels вкладок.
design	'material' \| 'cupertino'	'cupertino'	Визуальный стиль tabs.
full	boolean	false	Заставляет контейнер tabs и каждый tab использовать всю доступную ширину.