본문으로 건너뛰기

탭 · 아코디언

같은 화면 안에서 같은 무게의 내용 사이를 오가면 Tabs, 긴 쪽에 묶음을 접어 두면 Accordion 입니다.

탭의 모양은 TabNav 와 같고(굵기 600 + primary 2px 밑줄) 다른 것은 의미입니다. 주소가 바뀌면 TabNav(링크), 같은 화면의 패널을 바꾸면 Tabs(tablist), 같은 데이터의 보기 · 거르기는 SegmentedControl 입니다. 좁아서 넘친 탭은 끝의 ‘더 보기’ 메뉴로 옮기고 고른 탭은 늘 보입니다. 아코디언 항목 사이는 헤어라인뿐이고 머리 줄에 지금 값을 두어 펼치지 않고도 읽게 합니다. radix-ui 가 필요합니다.

import
import { Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Collapsible, CollapsibleTrigger, CollapsibleContent } from "@uyoolabs/ui/nav";
쓰는 곳
Tabs: 채널 정보 드로어(정보 · 멤버 · 파일 · 고정) · 스레드 패널 · 설정 화면 세로 탭. Accordion: 워크스페이스 설정 섹션 · 결제 도움말 FAQ. Collapsible: ‘자세히 보기’ · 완료 15개 뒤 접기.
쓰지 않는 경우
탭 안에 탭을 또 두지 않습니다(둘째 층은 세그먼트나 섹션 제목). 탭을 ‘다음 단계’로 쓰지 않습니다(순서가 있으면 Stepper). 주소가 바뀌는 이동을 Tabs 로 하지 않습니다(TabNav). 아코디언 하나에 중요한 필수 입력을 숨기지 않습니다.

Tabs

결제 모듈 개편 진행 공유 · 비공개 채널
감사 로그 · 지난 90일
키동작
←·→이전 · 다음 탭으로 가며 바로 고른다(세로는 ↑ ↓). 비활성 탭은 건너뛰고 끝에서 돈다
Home·End처음 · 끝 탭
Enter·Spacemanual 이면 포커스된 탭을 고른다
Tab고른 패널로 들어간다(탭 목록 안의 정지점은 고른 탭 하나). 넘치면 ‘더 보기’ 단추를 지난다
‘더 보기’ 메뉴넘친 탭을 고르면 그 탭이 목록에 돌아와 보이고 포커스도 그 탭으로 간다

Accordion · Collapsible

메시지 · 파일은 정한 기간이 지나면 지웁니다.

키동작
Enter·Space펼침 · 접힘. single 이면 다른 항목이 닫힌다(collapsible 이면 자기도)
↓·↑다음 · 이전 머리(끝에서 돈다)
Home·End첫 · 마지막 머리
Tab머리 사이 · 펼친 본문 안 컨트롤로. 접힌 본문은 inert 라 들어가지 않는다
비활성 머리포커스는 받되 펼치지 않는다(aria-disabled). 이유는 설명 줄이 말한다
찾기(⌘F)접힌 본문 안의 글이 걸리면 펼친다(hidden=until-found)

props

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

Tabs

prop타입기본값설명
size"sm" | "md""md"md 40(기본) · sm 32(패널 · 드로어 안)
lang"ko" | "en" | "ja"—
labelsPartial<TabsLabels>—

이 밖에 Radix Tabs.Root props(dir 제외)를 그대로 받습니다. 기본값을 바꾼 것은 orientation="horizontal" 입니다.

TabsList

prop타입기본값설명
aria-label필수string—필수다. 한 화면에 tablist 가 여럿일 수 있다
overflow"menu" | "none""menu"가로 탭이 자리를 넘칠 때. menu(기본): 넘친 탭을 끝의 '더 보기' 메뉴로 옮긴다(결정 #52). 고른 탭은 늘 보인다. none: 넘쳐도 그대로 둔다(자리가 넉넉한 곳)

이 밖에 Radix Tabs.List props를 그대로 받습니다.

TabsTrigger

prop타입기본값설명
iconReactNode—16 앞 아이콘
countnumber—이름 뒤 13 muted 숫자. 고른 탭이어도 400 이다. 이름에 붙어 읽힌다(‘멤버 12’)
dotboolean | string—새것 있음 점(8 primary). 이름에 ‘, 새 활동’ 이 붙는다. 문자열이면 그 말을 붙인다

이 밖에 Radix Tabs.Trigger props를 그대로 받습니다.

Accordion

prop타입기본값설명
type필수"single" | "multiple"—
valuestring | string[]—펼친 항목(제어)
defaultValuestring | string[]—처음 펼친 항목(비제어)
onValueChange(value: string) => void | (value: string[]) => void—
collapsibleboolean—열린 것을 다시 눌러 모두 닫을 수 있다

이 밖에 Radix Accordion.Root props(value · defaultValue · type · onValueChange · collapsible · orientation · dir 제외) · Radix Accordion.Root props(value · defaultValue · type · onValueChange · collapsible · orientation · dir 제외)를 그대로 받습니다.

AccordionItem

prop타입기본값설명
value필수string—항목 이름. #hash 와 맞출 때 쓰는 id 로도 쓴다
disabledbooleanfalse펼치지 않는다. 포커스는 받는다(aria-disabled). 이유는 머리의 description 에 적는다

이 밖에 Radix Accordion.Item props(disabled 제외)를 그대로 받습니다.

AccordionTrigger

prop타입기본값설명
descriptionReactNode—둘째 줄 13 muted(hover 때 fg). 비활성 이유도 여기 적는다
metaReactNode—끝 자리: 배지 · 지금 값(‘1년’) · 개수
iconReactNode—앞 16 muted 아이콘. 있으면 본문을 제목 글자 줄에 맞춘다
headingLevel2 | 3 | 4 | 5 | 63머리 수준. 기본 3

이 밖에 Radix Accordion.Trigger props(asChild 제외)를 그대로 받습니다.

AccordionContent

prop타입기본값설명
keepMountedbooleantrue접혀도 DOM 에 남긴다. hidden="until-found" 로 숨겨 찾기(⌘F)로 찾으면 펼친다

이 밖에 <div> props를 그대로 받습니다.

Collapsible

prop타입기본값설명
openboolean—펼침(제어)
defaultOpenbooleanfalse처음 펼침(비제어)
onOpenChange(open: boolean) => void—
openOnHashbooleantrue주소 #hash 가 안쪽 요소를 가리키면 펼친 채로 시작하고, 펼친 뒤 그 요소로 스크롤한다
lang"ko" | "en" | "ja"—
labelsPartial<CollapsibleLabels>—

이 밖에 Radix Collapsible.Root props(open · defaultOpen · onOpenChange 제외)를 그대로 받습니다.

CollapsibleTrigger

prop타입기본값설명
summaryReactNode—접힌 동안 보일 요약(말줄임)

이 밖에 Radix Collapsible.Trigger props를 그대로 받습니다.