다양한 스타일의 탭 네비게이션을 확인할 수 있습니다. 키보드 화살표 키로 탭 간 이동이 가능합니다.
탭 네비게이션은 관련된 콘텐츠를 구조화하고 공간을 효율적으로 사용할 수 있는 UI 패턴입니다.
Underline 스타일은 가장 일반적으로 사용되는 탭 디자인으로, 활성 탭 아래에 선이 표시됩니다.
주요 기능:
탭 네비게이션을 구현할 때는 다음 사항을 고려해야 합니다:
1. 탭 레이블은 간결하고 명확해야 합니다.
2. 활성 탭은 시각적으로 명확히 구분되어야 합니다.
3. 모바일에서 스크롤 가능한 경우, 스크롤 가능함을 시각적으로 나타내야 합니다.
탭 설정을 커스터마이즈할 수 있습니다.
애니메이션 속도, 색상, 간격 등을 조정하여 디자인에 맞게 변경 가능합니다.
Pills 스타일은 둥근 배경으로 활성 탭을 강조합니다.
깔끔하고 현대적인 느낌을 주며, 인터페이스를 부드럽게 만듭니다.
프로필 정보를 관리하고 수정할 수 있습니다.
Pills 스타일은 일반적으로 회색 배경과 흰색 활성 탭으로 구성됩니다.
메시지 목록을 확인하고 새 메시지를 작성할 수 있습니다.
이 스타일은 특히 설정 메뉴나 대시보드에서 자주 사용됩니다.
알림을 확인하고 관리할 수 있습니다.
약간의 그림자 효과로 깊이감을 더해 활성 탭을 강조합니다.
Boxed 스타일은 테두리로 탭을 구분하며, 활성 탭에 색상 배경을 적용합니다.
전통적이고 명확한 구분을 제공하여 기업용 애플리케이션에 적합합니다.
분석 데이터를 시각화하고 인사이트를 얻을 수 있습니다.
Boxed 스타일은 각 탭을 명확히 구분하여 전문적인 인상을 줍니다.
리포트를 생성하고 내보낼 수 있습니다.
연결된 박스 형태로 통일감 있는 디자인을 제공합니다.
Vertical 탭은 사이드바 형태로 탭을 배치합니다.
설정 페이지나 많은 수의 탭이 필요한 경우에 적합합니다.
데스크톱에서는 수직으로, 모바일에서는 수평으로 전환됩니다.
보안 관련 설정을 관리할 수 있습니다.
수직 레이아웃은 더 많은 공간을 콘텐츠에 할애할 수 있습니다.
개인정보 보호 설정을 조정할 수 있습니다.
긴 탭 레이블도 잘려지지 않고 표시할 수 있습니다.
앱의 외관을 커스터마이즈할 수 있습니다.
수직 탭은 계층적인 정보 구조를 잘 표현합니다.