Tabs · Elements

#Basic usage

Content is ink — the marks that carry the words.

tabs/basic.vue

<script setup lang="ts">
import { Tabs } from "@bysages/vue";
</script>

<template>
  <!-- The strip rides the full width, the way a page's own tabs do. -->
  <Tabs.Root default-value="ink" class="w-full">
    <Tabs.List class="w-full">
      <Tabs.Trigger value="ink">Ink</Tabs.Trigger>
      <Tabs.Trigger value="paper">Paper</Tabs.Trigger>
      <Tabs.Trigger value="light">Light</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="ink">Content is ink — the marks that carry the words.</Tabs.Content>
    <Tabs.Content value="paper">The ground is warm paper, never pure white.</Tabs.Content>
    <Tabs.Content value="light">Hierarchy is light — shadow answers to the source.</Tabs.Content>
  </Tabs.Root>
</template>

tabs/card Vue React

The brush answers the hand.

tabs/card.vue

<script setup lang="ts">
import { Tabs } from "@bysages/vue";
</script>

<template>
  <Tabs.Root variant="card" default-value="brush" class="w-full">
    <Tabs.List>
      <Tabs.Trigger value="brush">Brush</Tabs.Trigger>
      <Tabs.Trigger value="ink">Ink</Tabs.Trigger>
      <Tabs.Trigger value="paper">Paper</Tabs.Trigger>
    </Tabs.List>
    <Tabs.Content value="brush">The brush answers the hand.</Tabs.Content>
    <Tabs.Content value="ink">The ink remembers the grinding.</Tabs.Content>
    <Tabs.Content value="paper">The paper holds its breath.</Tabs.Content>
  </Tabs.Root>
</template>

#Props

#Root

Prop	Type	Default	Description
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	One rung of the control-height ladder for the tab rows.
`variant`	`String as PropType<"line" \| "card">`	`"line"`	The register: a ruled strip, or each selection lifted into a card.
`orientation`	`String as PropType<"horizontal" \| "vertical">`	`"horizontal"`	Which rail the rule rides: a strip across, or a rail down.
`activationMode`	`'manual' \| 'automatic'`	`"automatic"`	The activation mode of the tabs. Can be `manual` or `automatic` - `manual`: Tabs are activated when clicked or press `enter` key. - `automatic`: Tabs are activated when receiving focus
`composite`	`boolean`		Whether the tab is composite
`defaultValue`	`string`		The initial selected tab value when rendered. Use when you don't need to control the selected tab value.
`deselectable`	`boolean`		Whether the active tab can be deselected when clicking on it.
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ root: string; trigger: (id: string) => string; content: (id: string) => string; list: string; indicator: string; }>`		The ids of the elements in the tabs. Useful for composition.
`loopFocus`	`boolean`	`true`	Whether the keyboard navigation will loop from last tab to first, and vice versa.
`modelValue`	`string`		The v-model value of the tabs
`navigate`	`(details: tabs.NavigateDetails) => void`		Function to navigate to the selected tab when clicking on it. Useful if tab triggers are anchor elements.
`translations`	`tabs.IntlTranslations`		Specifies the localized strings that identifies the accessibility elements and their states