Tablist

Tablist (탭 리스트)

탭 리스트는 다른 페이지로 이동하지 않고도 관련 정보의 범주 사이를 전환하게 해 주는 요소예요. 콘텐츠가 많은 페이지를 구분되지만 서로 관련된 범주로 나누어, 더 쉽게 처리하고 스크롤을 덜 하게 만드는 데 이상적이죠. 탭은 밀접하게 관련되고 자주 방문하는 소수의 페이지 사이를 이동하는 내비게이션에도 사용할 수 있어요.

밀접하게 관련된 범주를 넘어서는 내비게이션에는 link를 대신 사용하세요. 액션을 시작하려면 button을 사용하세요.

출처: React Tablist 문서

본문

Layout (레이아웃)

탭 리스트는 기본적으로 가로로 배치되지만 선택적으로 세로로 배치할 수도 있어요. 가로 탭 리스트의 탭은 스크롤되거나 다음 줄로 줄바꿈되지 않아요. 이는 컨테이너의 너비에 의해 제한된다는 뜻이죠. 더 많은 탭을 보여줘야 한다면 오버플로 메뉴 버튼(overflow menu button)을 포함하세요.

Horizontal tablist

가로

Vertical tablist

세로

탭 라벨은 텍스트만, 텍스트+아이콘, 또는 아이콘만 일 수 있어요. 탭 리스트의 모든 탭에 어울리는 단일 형식을 선택하세요.

탭 리스트는 여러 탭을 오버플로 메뉴로 밀어 넣어 찾기 어렵게 만드는 작은 레이아웃에서는 효과가 덜해요. 공간이 제한적일 때는 accordion이나 dropdown처럼 콘텐츠 뷰를 전환하는 다른 옵션을 고려하세요.

Tablist on small layout

작은 레이아웃에서는 탭 리스트보다 드롭다운이 더 나을 수 있어요

Behavior (동작)

Default selection (기본 선택)

기본적으로 첫 번째 렌더링에서 항상 하나의 탭—보통 첫 번째—이 활성화되어 있어야 해요. 콘텐츠 순서를 정할 때 이 점을 유의하세요.

Accessibility (접근성)

보이는 텍스트 라벨 없이 아이콘만 보여주는 탭은 각 탭을 화면 낭독기에 식별하기 위해 aria-label을 포함해야 해요. 시력이 있는 사용자에게도 아이콘을 설명하는 툴팁을 항상 포함하세요.

커스텀 오버플로 메뉴 버튼을 만들 때는 버튼 요소에 role="tab"을 포함해서 화면 낭독기가 그것을 탭으로 식별하게 하세요.

현재 선택이 aria-current를 사용해 화면 낭독기에 식별되도록 하세요.

Content (콘텐츠)

탭 라벨은 간결하게 유지하세요. 보통 명사나 짧은 구절이 가장 좋아요. 탭 리스트는 줄바꿈되지 않아요. 공간이 충분하지 않으면 추가 탭은 오버플로 메뉴로 들어가요.

탭 라벨은 문법적으로나 개념적으로 서로 평행하게 유지해서, 하나의 정보 집합에 대한 관련 범주로 읽히게 하세요.

모든 탭 이름에는 문장형 대문자 표기를 사용하고 끝 문장 부호는 쓰지 마세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization과 Periods를 참고하세요.

Labels are short, parallel phrases

라벨은 짧고 평행한 구절이어야 해요

Don't combine phrases that aren't parallel

평행하지 않은 구절을 결합하지 마세요

더 알아보기 (Learn more)