Components
Tabs
Separates content within the same context. Move with the left/right arrow keys and Home/End.동일한 맥락의 콘텐츠를 구분합니다. 좌우 방향키, Home, End 키로 이동할 수 있습니다.
Interactive tabs
The selection indicator travels between tabs to show where you've moved (spring / snappy).선택 표시가 탭 사이를 이동해 현재 위치의 변화를 보여줍니다 (spring / snappy).
Meet new connections and experiences in everyday life.일상 속 새로운 연결과 경험을 만납니다.
Usage사용 가이드
Short, parallel labels짧고 나란한 레이블
Keep labels to one or two words with the same grammatical form, and two to five tabs.레이블은 한두 단어로 같은 형태를 유지하고, 탭은 2~5개로 둡니다.
Don't write long labels that wrap or get cut off, or mix nouns with sentences.줄바꿈되거나 잘리는 긴 레이블, 명사와 문장이 섞인 레이블을 쓰지 않습니다.
Tabs aren't steps탭은 단계가 아닙니다
Use tabs for views people can switch between in any order, keeping what they've entered.순서와 상관없이 오갈 수 있고 입력 내용이 유지되는 보기에 탭을 씁니다.
Don't use tabs for a sequence such as sign-up steps. Use a stepper with Next and Back.가입 단계처럼 순서가 있는 흐름에 탭을 쓰지 않습니다. 다음, 이전이 있는 단계 표시를 씁니다.
Accessibility contract접근성 계약
| Element요소 | Role역할 |
|---|---|
| Tab list탭 목록 | role="tablist" with a name describing the contextrole="tablist" 및 맥락을 설명하는 이름 |
| Each tab각 탭 | role="tab", aria-selected, aria-controls |
| Current tab현재 탭 | tabindex="0" / other tabs -1 (roving tabindex)tabindex="0" / 다른 탭은 -1 (roving tabindex) |
| Content콘텐츠 | role="tabpanel", aria-labelledby / inactive panels are hiddenrole="tabpanel", aria-labelledby / 비활성 패널은 hidden |
| Keyboard키보드 | ← → to move, Home/End for first and last, activates on selection← → 이동, Home/End 처음과 끝, 선택 즉시 활성화 |