탭 vs. 분할 컨트롤
짧은 답변
탭은 콘텐츠 섹션 간 전환을 합니다. 세그먼트 컨트롤은 같은 뷰에서 작은 모드, 필터, 또는 값을 변경합니다.
별도의 콘텐츠 섹션에는 탭을 사용하세요. 동일한 콘텐츠를 변경하는 몇 가지 짧은 선택에는 세분화된 컨트롤을 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
Tabs
↗ 탭들
탭은 레이블을 사용하여 하나의 공유 패널에서 콘텐츠를 전환합니다. 주요 작업은 열려 있습니다.
개요, 활동, 권한은 동일한 프로젝트가 열려 있는 동안 하단 패널을 변경합니다.
- 사용할 때
- 레이블이 보이도록 유지해야 하는 동일한 수준의 몇 개 섹션에는 탭을 사용하세요.
- 다음 경우에는 사용하지 마세요
- 서로 관련 없는 페이지에 대한 작은 링크로 탭을 사용하지 마세요.
- 코드에서 사용된 이름
role="tablist"
Toggle Group
↗ 토글 그룹
끄고 켤 수 있는 버튼 묶음에 라벨이 붙어 있어요. 한 개 이상의 선택지가 눌린 상태로 남을 수 있어요.
토글 그룹
글 편집기는 굵게와 기울임을 동시에 켤 수 있어. 각 버튼은 눌렸는지 안 눌렸는지 알려줘.
- 사용할 때
- 현재 상태가 보여야 하는 몇 가지 작고 되돌릴 수 있는 모드용으로 사용하세요.
- 다음 경우에는 사용하지 마세요
- 정확히 하나의 선택만 제출할 수 있을 때는 라디오 버튼을 사용하십시오. 일반 양식 선택에는 체크박스를 사용하십시오.
- 코드에서 사용된 이름
button[aria-pressed] in a labeled group
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 탭들Tabs | 레이블이 보이도록 유지해야 하는 동일한 수준의 몇 개 섹션에는 탭을 사용하세요. | 서로 관련 없는 페이지에 대한 작은 링크로 탭을 사용하지 마세요. | role="tablist" |
| 토글 그룹Toggle Group | 현재 상태가 보여야 하는 몇 가지 작고 되돌릴 수 있는 모드용으로 사용하세요. | 정확히 하나의 선택만 제출할 수 있을 때는 라디오 버튼을 사용하십시오. 일반 양식 선택에는 체크박스를 사용하십시오. | button[aria-pressed] in a labeled group |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
04
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 탭들 (Tabs)、토글 그룹 (Toggle Group)에서 선택하세요. 이 규칙 사용: 탭은 콘텐츠 섹션 간 전환을 합니다. 세그먼트 컨트롤은 같은 뷰에서 작은 모드, 필터, 또는 값을 변경합니다. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.