확장 가능한 항목은 추가 콘텐츠를 인라인으로 표시하는 맞춤 칩입니다.
확장 가능한 항목 칩
확장형 항목을 사용하면 앱에서 화면의 더 작은 공간에 고밀도 콘텐츠를 포함할 수 있습니다. 앱을 압축하면서 사용자가 추가 콘텐츠에 빠르게 액세스할 수 있도록 하려면 이 구성요소를 사용합니다.
이 구성요소를 사용하면 사용자가 다음 작업을 수행할 수 있습니다.
- 목록 항목 더보기 (칩, 카드)
- 텍스트 더보기
분석
확장 목록
칩은 가운데 정렬되어야 합니다.
A. 라벨
라벨 텍스트는 맞춤설정할 수 있습니다. 기본값은 '더보기'입니다.
B. 컨테이너
버튼에 컨테이너 테두리가 있어야 합니다.
C. 펼치기 아이콘
기본 아이콘은 아래를 향한 갈매기형 모양의 아이콘이며 맞춤설정하거나 삭제할 수 있습니다. 이 아이콘은 LTR 언어에서는 오른쪽 정렬되고 RTL 언어에서는 왼쪽 정렬됩니다.
확장 텍스트
칩은 가운데 정렬되어야 합니다.
A. 라벨
라벨 텍스트는 맞춤설정할 수 있습니다. 기본값은 '더보기'입니다.
B. 컨테이너
버튼에는 윤곽선이 있는 버튼과 윤곽선이 없는 상태의 두 가지 변형이 있습니다.
C. 펼치기 아이콘
기본 아이콘은 아래를 향한 갈매기형 모양의 아이콘이며 맞춤설정하거나 삭제할 수 있습니다. 이 아이콘은 LTR 언어에서는 오른쪽 정렬되고 RTL 언어에서는 왼쪽 정렬됩니다.
동작
목록 확장
칩을 탭하여 펼치면 더 많은 항목을 목록에 표시할 수 있습니다. 확장 작업이 애니메이션으로 표시되면서 더보기 텍스트는 숨기고 다른 항목은 부드럽게 한 번에 표시합니다. 접힌 상태로 표시되는 항목의 수를 맞춤설정할 수 있습니다. 항목의 권장 개수는 3개입니다.
확장 텍스트
칩을 탭하여 펼치면 더 많은 텍스트를 볼 수 있습니다. 확장 작업이 애니메이션 처리되어 More 텍스트가 숨겨지고 다른 항목은 부드럽게 한 번에 표시됩니다. 접힌 상태에 표시되는 텍스트 줄 수를 맞춤설정할 수 있습니다. 권장되는 줄 수는 8개입니다.
탭 타겟은 버튼뿐만 아니라 전체 텍스트 영역으로 구성됩니다.
칩 스타일
확장 텍스트
아이콘 크기: 20dp x 20dp
아이콘 색상: 표면 위
높이: 32dp
너비: 텍스트 및 언어에 따라 다름
획: 0 또는 1dp
채우기: 없음
라벨 스타일: 설명 1
라벨 색상: 표면 위
패딩
확장형 항목 구성요소의 목록 변형과 텍스트 변형의 경우 모두 칩에 다음과 같은 패딩 값이 있어야 합니다.
- 상단 패딩: 8dp
- 하단 패딩: 16dp
사용법
확장형 항목 사용의 예:
