Tabs

A compact segmented navigation component for switching between views.

Installation

npx alixan-ui-nuxt add tabs

Usage

<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>

Full Width

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

API Reference

Prop	Type	Default	Description
modelValue	number	0	Selected tab index used by v-model.
tabs	string[]	[]	List of tab labels.
design	'material' \| 'cupertino'	'cupertino'	Visual style of the tabs.
full	boolean	false	Makes the tabs container and every tab use full available width.