밑줄 탭
상단 주 탭이에요. 밑줄이 고른 탭으로 미끄러지며 옮겨 가요.
플랫폼
폰 브라우저·홈 화면 앱(767px 이하)고르기#
- 이 이름은 알약 탭(TabsBar)에 합쳤어요. 모양은 그대로이고, 새로 쓸 때는 정본을 써요.
알약 탭 문서 보기 →
사용 예제#
할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.
해부도#
- 1
탭 목록
아래 1px 선 위에 탭이 놓여요.
- 2
고른 탭
굵은 검정 글자예요.
- 3
밑줄
고른 탭 아래로 300ms 동안 미끄러져요.
속성#
인터페이스#
타입에서 자동으로 뽑은 표예요.
TossTabs#
| 속성 | 기본값 | 타입 | 설명 |
|---|---|---|---|
| value* | - | T | 지금 값이에요. |
| onChange* | - | (v: T) => void | 값이 바뀌면 새 값으로 불러요. |
| options* | - | readonly (readonly [T, string])[] | [값, 이름] 목록이에요. |
| className | - | string | 배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요. |
| tabId | - | string | 주면 탭 버튼에 id=`${tabId}-${값}`·aria-controls=`${tabId}-panel`을 단다 - 패널 쪽이 role=tabpanel·aria-labelledby로 받는다. |
* 필수예요. 표는 타입에서 자동으로 뽑았어요.
스펙#
상태 · 슬롯마다 실제로 그려지는 값이에요.
TossTabs#
base
selected=true
| 상태 | 슬롯 | 속성 | 값 |
|---|---|---|---|
| enabled | tab | 굵기 | 700 |
| 글자색 | ink |
값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.
접근성#
가이드라인#
이렇게 써요#
쓰는 규칙#
이렇게 써요
- 탭은 2~5개로 둬요.
- 라벨은 내용의 이름으로 짧게 적어요.
이렇게 하지 않아요
- 탭 안에 또 탭을 두지 않아요.
문구#
- 탭 이름은 내용의 이름으로, 짧은 명사로 적어요.
플랫폼별 차이#
| 플랫폼 | 차이 |
|---|---|
| 모바일 | 767px 이하에서 누르는 칸과 여백이 커져요(손가락 기준). |
| PC | 마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요. |