Tabs

Stablev1.0.0

관련된 콘텐츠를 같은 영역에서 전환해가며 보여줍니다.

Account

이름을 변경하면 즉시 반영됩니다.

Name

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings…</TabsContent>
  <TabsContent value="password">Change password…</TabsContent>
</Tabs>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/tabs.json

Composition

Tabs
├── TabsList
│   ├── TabsTrigger
│   └── TabsTrigger
├── TabsContent
└── TabsContent

Accessibility

이 컴포넌트는 WAI-ARIA tabs 패턴을 따릅니다.

Keyboard interactions

Key	Description
`←→`	탭 간 이동 (가로).
`Home`	첫 번째 탭.
`End`	마지막 탭.
`Tab`	활성 탭의 콘텐츠로 이동.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1