Prev
Next
Back
각 메뉴탭에는 반응형 정책에 따른 Text Size를 적용합니다.
Header의 Category Menu 영역에 들어갈 텍스트 메뉴가 5개 이상인 경우, Menu Tab으로 배치하는 방법을 고려할 수 있습니다.
대분류 형태로 사용되는 메뉴탭을 정의합니다.
활성화 상태에서는, 하단 바 표시와 함께 Primary 색상으로 강조할 수 있습니다.
텍스트 사이즈에 맞춰 하단 바 길이가 적용되며, 메뉴탭은 좌측 정렬로 배치합니다.
메뉴 개수가 많아질 경우, 반응형 정책에서 가로 스크롤 형태로 보여집니다.
고정된 메뉴탭 사이즈 내부에 2개 또는 3개의 메뉴가 Full Width로 적용됩니다.
메뉴탭 가로 사이즈에 맞춰 하단 바 길이가 적용됩니다.
Arrow icon을 활용해 옵션 설정을 변경할 수 있는 메뉴탭입니다. Dim 20% 위로 옵션 메뉴가 보여집니다.
해당 옵션 메뉴 변경에 따라, 하단의 메인 컨텐츠 영역은 전부 영향을 받아 재적용됩니다.
옵션 리스트는 기본 6개까지 보여주며, 개수가 추가될 경우 Option Menu Box 내부에서 세로 스크롤 형태로 배치합니다.
Switch Button을 활용해 화면 설정 및 변경 등을 적용할 수 있는 메뉴탭입니다.
활성화 된 메뉴의 경우, 텍스트 및 버튼에 Primary 색상을 적용합니다.
컨텐츠 영역에 활용되는 소분류 형태의 메뉴탭을 정의합니다.
중앙정렬로 배치하며, 개수가 많아질 경우 반응형 정책에서 좌측정렬 후 가로 스크롤로 전체 영역을 배치합니다.
디바이스 별 Small Text 정책을 사용합니다.
활성화 된 메뉴는 Primary 색상과 하단 바를 활용해 강조할 수 있습니다.
텍스트 사이즈에 맞춰 하단 바 길이가 적용됩니다.
Badge 형태로 메뉴탭이 적용됩니다.
활성화 상태에서 Primary 색상에, 텍스트는 Fixed Text Color - **White**로 적용합니다.
선택 메뉴를 제외한 메뉴에는 Primary Sub 또는 Gray2 색상에, 텍스트 Black, Regular를 적용합니다.
