각 탭의 내용에 이름을 지정하세요.
탭은 동일한 컨텍스트를 가진 영역과 일치합니다. 다양한 수준의 페이지에서는 탐색을 사용해야 합니다.
탭 디자인 시스템
동일한 수준의 콘텐츠 영역 간에 전환합니다.
체크리스트 내용
검토 진행 상황
01
구조와 의미
사용 맥락에 따라 정보와 프레젠테이션을 비교합니다.
02
상호 작용 및 유용성
작업을 시도하고 상태를 변경한 후 작업을 계속하세요.
03
경험을 완성하세요
디자인을 활용하면서 놓치기 쉬운 디테일을 확인해보세요.
진행 상황은 이 브라우저에 자동으로 저장됩니다.
안내
검토 방법
예시
활용 예시
각 탭의 내용에 이름을 지정하세요.
프로젝트 세부 사항에는 "개요", "회원" 및 "활동"이 포함됩니다.
변형 및 사용 사례
대상 및 현재 선택된 탭
선택한 탭을 표시나 위치로 표시하고 무색일 때도 라벨을 선명하게 유지합니다.
테마를 변경하고 긴 라벨이 있는 탭을 사용해 보세요. 확인 표시는 여전히 올바른 콘텐츠를 첨부합니다.
예시 송장 패널이 표시되면 송장 탭에 밑줄을 긋습니다.
귀하의 프로젝트
새로운 업데이트가 있습니다
변경사항이 저장되었습니다.
귀하의 프로젝트
새로운 업데이트가 있습니다
변경사항이 저장되었습니다.
콘텐츠가 탭으로 로드됩니다.
탭에 대해 로드 상태와 오류 상태를 별도로 유지하고 콘텐츠를 이전 탭의 응답으로 바꾸지 마세요.
초기 요청이 느린 경우 탭을 빠르게 변경하세요. 현재 탭의 응답만 표시됩니다.
예시 기록을 보는 동안 개요의 응답이 늦어도 패널이 변경되지 않습니다.
귀하의 프로젝트
새로운 업데이트가 있습니다
변경사항이 저장되었습니다.
집중, 선택 및 사용할 수 없습니다.
선택한 탭과 포커스를 구별합니다. 사용할 수 없는 탭에는 찾기 쉬운 이유가 필요합니다.
탭 및 화살표 키 작업 화면 판독기가 선택한 탭을 올바르게 읽습니다.
예시 개요를 선택하는 동안 포커스 테두리는 보고서에 있을 수 있습니다.
귀하의 프로젝트
새로운 업데이트가 있습니다
변경사항이 저장되었습니다.