Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
83b9bc2027
shadcn-vue/apps/www/src/content/docs/components/tabs.md
Roman Hrynevych f73e1ddaaf
docs: add vertical Tabs example (#739) 
* feat(docs): add vertical Tabs example and components for account/password management

* fix(TabsTrigger): wrap slot content in a span with truncate class for better text handling

* chore: build:registry
2024-08-30 20:51:17 +03:30

990 B
Raw Blame History

title description source primitive
Tabs A set of layered sections of content—known as tab panels—that are displayed one at a time. apps/www/src/lib/registry/default/ui/tabs https://www.radix-vue.com/components/tabs.html

Installation

npx shadcn-vue@latest add tabs

Usage

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

<template>
  <Tabs default-value="account" class="w-[400px]">
    <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>

Examples

Vertical