Account

Make changes to your account here. Click save when you're done.

Name

Username

Installation

pnpm dlx kliping@latest add tabs

Usage

<script setup lang="ts">
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
</script>

<template>
  <Tabs default-value="account">
    <TabsList>
      <TabsTrigger value="account">
        Account
      </TabsTrigger>
      <TabsTrigger value="password">
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      Make changes to your account here.
    </TabsContent>
    <TabsContent value="password">
      Change your password here.
    </TabsContent>
  </Tabs>
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/tabs/tabs.vue components/ui/tabs/tabs-content.vue components/ui/tabs/tabs-list.vue components/ui/tabs/tabs-trigger.vue components/ui/tabs/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Tabs>
  <TabsList>
    <TabsTrigger />
  </TabsList>
  <TabsContent />
</Tabs>

API Reference

Tabs

Prop	Type	Default	Description
defaultValue?	StringOrNumber	—	The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
orientation?	DataOrientation	—	The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
dir?	Direction	—	The reading direction of the combobox when applicable. If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.
activationMode?	"automatic" | "manual"	—	Whether a tab is activated automatically (on focus) or manually (on click).
modelValue?	StringOrNumber	—	The controlled value of the tab to activate. Can be bind as v-model.
unmountOnHide?	boolean	—	When true, the element will be unmounted on closed state.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Event	Payload	Description
@update:modelValue	[payload: StringOrNumber]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: string | number | undefined; }

Data attribute	Value
[data-slot]	"tabs"

TabsContent

Prop	Type	Default	Description
value	StringOrNumber	—	A unique value that associates the content with a trigger.
forceMount?	boolean	—	Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"tabs-content"

TabsList

Prop	Type	Default	Description
loop?	boolean	—	When true, keyboard navigation will loop from last tab to first, and vice versa.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"tabs-list"

TabsTrigger

Prop	Type	Default	Description
value	StringOrNumber	—	A unique value that associates the trigger with a content.
disabled?	boolean	—	When true, prevents the user from interacting with the tab.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"tabs-trigger"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Tabs yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Tab	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content.
ArrowDown	Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowRight	Moves focus to the next trigger depending on orientation and activates its associated content.
ArrowUp	Moves focus to the previous trigger depending on orientation and activates its associated content.
ArrowLeft	Moves focus to the previous trigger depending on orientation and activates its associated content.
Home	Moves focus to the first trigger and activates its associated content.
End	Moves focus to the last trigger and activates its associated content.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --border, --foreground, --input, --muted, --muted-foreground, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.