알약 탭
Radix 탭 위의 알약형 탭 목록이에요. 이미 열린 탭을 다시 누르면 그 내용의 처음으로 올라가요.
모바일PCTabsBar
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.
언제 쓰나#
- 같은 자리의 내용을 갈아 끼우는 탭(알약·밑줄).
인터페이스#
타입에서 자동으로 뽑은 표예요.
TabsBar#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| tabs* | - | readonly TabItem[] | |
| variant | 'pill' | 'pill' | 'underline' | 'side' | 모양이에요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| label | - | string | 화면 읽기 프로그램이 읽는 이름(aria-label)이에요. |
| divideAt | - | number | |
| value | - | T | 지금 값이에요. |
| onChange | - | (v: T) => void | 값이 바뀌면 새 값으로 불러요. |
| tabId | - | string |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
접근성#
- Radix Tabs가 키보드 이동과 aria를 맡아요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |