Scalable
좌우로 스크롤 가능하기 때문에 원하는 만큼 많은 tab을 추가할 수 있습니다.
Tab 간 이동
Tab 간 이동은 바로 태핑하거나 콘텐츠 영역을 좌우로 스와이프하는 방식으로 가능합니다.
콘텐츠 영역에 다른 스와이프 가능한 요소가 있을 경우 인터랙션이 충돌하지 않도록 주의해 사용합니다.
Usage
Tab 간 스와이프 이동 시 콘텐츠 영역 처리
Tab 간 스와이프 이동을 지원하는 경우, 콘텐츠 영역의 스와이프 요소와 인터랙션이 충돌하지 않도록 주의합니다.
Caution
Tab 이동을 위한 스와이프와 콘텐츠 영역 스와이프가 섞여있어 사용자가 원하지 않는 인터랙션을 할 가능성이 높습니다.
Tab 간 스와이프 이동 시 UI 힌트
스와이프할 Tab이 있음을 알려주기 위해 Tab을 가장자리 경계에 걸치거나 더보기 버튼을 두는 등의 힌트를 주어야 합니다.
Don’t
숨어있는 Tab의 일부를 노출하거나 스크롤 가능함을 표시하여 추가 Tab이 있음을 알려주어야합니다.
Tab 간 이동 방식의 일관성
Tab 간 이동 방식은 서비스내에서 동일하게 유지합니다.
Don’t
좌우 스와이프를 지원하는 Tab이 있는경우, 모든 Tab에서 좌우스와이프로 이동할 수 있도록 지원해야합니다.
Scroll
Tab은 화면 상단에 고정되어있어도 되고, 스크롤 되어 화면 밖으로 사라져도 됩니다.
다만, 스크롤과 함께 사라질 때는, 스크롤 up 시 다시 돌아와야합니다.
Top app bar와 붙어있는 Tab은 Top app bar와 하나인 것처럼 움직여야합니다.
(스크롤 시 Top app bar가 고정되어있는 상태에서 Tab만 화면밖으로 사라질 수 없습니다.)
Tab과 top app bar 함께 사용 시 인터랙션
스크롤 시 Top app bar 와 Tab은 함께 움직여야합니다.
Don’t
Top app bar 뒤로 Tab을 스크롤하지 않습니다. Tab이 다른 component에 붙어있을 때는, 하나처럼 움직여야합니다.
Do
스크롤 시 Tab과 Top app bar 모두 고정하거나 모두 사라지도록 합니다.
스크롤 시 tab 동작
스크롤 up, down 시 상단 Tab 고정 / 미고정 여부는 동일해야합니다.
Don’t
한 서비스 내에서 스크롤 시 Tab 고정/미고정 여부는 동일하게 유지합니다.
