Tabs
Tabs
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
Content 1
Installation
Props
TabsRoot
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
unmountOnExit? | boolean | false |
lazyMount? | boolean | false |
onValueChange? | ((value: string) => void) | - |
defaultValue? | string | - |
value? | string | - |
orientation? | "horizontal" | "vertical" | - |
stickyList? | boolean | false |
size? | "small" | "medium" | small |
contentLayout? | "fill" | "hug" | hug |
triggerLayout? | "fill" | "hug" | fill |
TabsList
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
TabsTrigger
| Prop | Type | Default |
|---|---|---|
disabled? | boolean | - |
value? | string | - |
notification? | boolean | - |
TabsCarousel
| Prop | Type | Default |
|---|---|---|
onSettle? | (() => void) | - |
dragThreshold? | number | - |
loop? | boolean | - |
autoHeight? | boolean | - |
swipeable? | boolean | - |
TabsContent
| Prop | Type | Default |
|---|---|---|
value? | string | - |
asChild? | boolean | false |
Examples
Layout Fill (Default)
Content 2
Layout Hug
Content 1
Size Medium
Content 1
Size Small (Default)
Content 1
Swipeable
Content 2
Disabled
Content 1
Notification
Content 1
Sticky List
탭이 전체화면을 차지하고, Tabs.List가 top에 고정되어 있는 경우 사용하는 예시입니다.
Content 1
Standalone
TabContent를 사용하지 않고, 컨텐츠 영역을 온전히 소유하고 싶을 때 사용하는 예시입니다.
탭에서 제공하는 Swipe 기능을 사용할 수 없습니다.
Content 1
Dynamic Height
각 탭의 높이가 다를 때, 아래의 컨텐츠를 탭 아래에 바로 맞추기 위해서 사용하는 예시입니다.
탭이 자주 바뀌고, 탭에 네트워크 요청이 많은 경우 캐싱을 잘 고려해주세요.
Content 1
아래 컨텐츠
Scroll to Top
Content 1