탭은 항상 그룹으로 나타나며 서로의 상태에 따라 달라집니다. 즉, 한 번에 하나의 탭만 활성화될 수 있습니다.

말풍선 아이콘
버튼 구성 요소
탭이 아닌 버튼은 다른 버튼과 독립적으로 작동할 수 있습니다.

해부

1. 활성 탭 아이콘
2. 비활성화된 탭 아이콘
3. 활성 탭 레이블
4. 비활성화된 탭 레이블

명세서

앱 바에 중첩된 탭 - 왼쪽 정렬

말풍선 아이콘
앱 바 및 헤더 구성 요소
사양, 스타일 가이드라인 등.

앱 바에 중첩된 탭 - 유연한 정렬

유연한 정렬 기능을 통해 탭 구성이 사용 가능한 공간에 맞게 늘어나거나 줄어듭니다.

앱 바에서 탭이 접혀 있는 상태 - 서랍 메뉴

말풍선 아이콘
앱 바 및 헤더 구성 요소
사양, 스타일 가이드라인 등.

독립형 탭 바 - 왼쪽 정렬

독립형 탭 바 - 유연한 정렬

유연한 정렬 기능을 통해 탭 구성이 사용 가능한 공간에 맞게 늘어나거나 줄어듭니다.

탭 레이블 문자열 오버플로

레이아웃 크기 조정

이 참조 레이아웃은 다양한 화면 너비와 높이에 맞춰 탭을 조정하는 방법을 보여줍니다. 모든 픽셀 값은 다운샘플링 또는 업샘플링이 발생하기 전의 렌더링된 픽셀 값입니다.

키가 작은 경우 표준 화면과 와이드 화면 비교

표준 높이 범위에서 표준 화면과 와이드 화면 비교

키가 큰 사람들을 위한 표준 화면과 와이드 화면 비교

모든 높이 범위의 초광폭 및 초대형 스크린

스타일

타이포그래피

타입 스타일 글꼴 무게 크기(dp)
바디 3M 로보토 중간 24
본문 3 로보토 정기적인 24

색상

요소 색상(주간 모드) 색상(야간 모드)
기본 유형/아이콘 하얀색 흰색 @ 88%
보조 유형/아이콘 흰색 @ 72% 흰색 @ 60%
탭 바 배경 검은색 검은색
스크롤 시 탭 바 배경 검정색 @ 84% 검정색 @ 88%
탭 아이콘 - 활성 상태 하얀색 흰색 @ 88%
탭 아이콘 - 비활성 상태 흰색 @ 56% 흰색 @ 50%

사이즈

요소 크기(dp)
기본 아이콘 44
보조 아이콘 36
아이콘 터치 타겟 76

예시

탭이 접혔습니다.


앱 바 안에 탭이 중첩되어 있습니다.

독립형 탭 바.