목록은 스크롤 및 포커스가 내장된 요소의 컨테이너입니다.
원칙
명확한 구성: 목록은 정보를 명확하고 스캔 가능한 세로 배열로 표시해야 합니다.
일관된 항목 표시: 목록 항목은 일관된 시각적 구조를 따라야 합니다.
포커스 가능성 및 탐색: 방향 탐색에 의존하는 인터페이스에서 목록은 포커스가 맞춰진 항목을 명확하게 나타내야 합니다.
상호작용: 목록 항목은 선택 가능하거나 실행 가능한 요소를 나타내는 경우가 많습니다.
사용 및 배치
목록에는 반복 가능한 요소가 포함된 다양한 형제 콘텐츠가 포함될 수 있습니다. 스택과 달리 목록은 앱 보기 컨테이너를 채웁니다.
스크림을 사용하여 오버플로 콘텐츠 표시 목록에 뷰에 맞게 표시할 수 있는 항목보다 더 많은 항목이 포함된 경우 목록 경계 근처에 검은색 스크림이 사용됩니다.
목록은 필요한 경우 제목을 사용할 수 있음 명확성을 위해 목록에서 정적 또는 고정 제목을 사용할 수 있습니다.
금지사항
깊이를 사용하여 포커스 표시
목록 항목은 포커스가 맞춰지지 않은 상태와 포커스가 맞춰진 상태에서 0~+4 깊이 사이를 이동합니다.
목록 항목은 실행 가능할 수 있음
목록의 항목은 작업으로 작동할 수 있습니다. 목록 항목에 작업을 유지합니다.
다른 항목을 스크롤할 수 있더라도 탭 시 활성화될 컨트롤을 강조표시합니다. 목록 또는 카드를 다른 요소 뒤에서 스크롤할 수 있는 경우 탭에 응답하는 항목에만 포커스를 맞춥니다.
권장사항
금지사항
분석
목록은 스크롤 컨테이너와 일관되게 간격이 지정된 목록 항목으로 구성됩니다. 항목 수가 뷰포트를 초과하면 목록이 최소한의 오버슈트로 세로로 스크롤되어야 합니다.
A. 컨테이너 - 스크롤 가능한 영역
B. 목록 항목
C. 시스템 표시줄
목록
항목: 목록 내의 각 개별 요소
A. 도형
B. 테두리
C. 앞부분 아이콘
D. 텍스트 콘텐츠
E. 후행 표시기
맞춤설정
대부분의 맞춤설정은 목록 항목으로 이루어집니다.
| 속성 | 맞춤설정 | 기본값 |
|---|---|---|
| 목록 항목: 도형 | 예 | 40 dp |
| 목록 항목: 앞부분 및 후행 아이콘 | 예 | 매체 기호 아이콘 |
| 목록 항목: 패딩 값 | 예 | 2dp, 20dp |
| 목록 항목: 콘텐츠 | 예 | 단일 줄: 기본 라벨에 Body Small을 사용하는 하나의 텍스트 컴포저블 두 줄: 기본 및 보조 라벨에 두 개의 텍스트 컴포저블이 포함된 열 기본: Title Small 보조: Body Small |
| 목록: verticalArrangement | 예 | 20 dp |