탭 (Tab)
v-tabs 컴포넌트는 선택가능한 아이템의 뒤로 컨텐츠를 숨기는데 사용됩니다. 탭은 페이지 내에서 탭이 링크이고 탭-아이템이 컨텐츠인 것 처럼 유사-탐색(pseudo-navigation)으로 사용될 수 있습니다.
API
Components.Tabs.
v-tabs 툴바 타이틀과 함께 나열되도록 설정
탭을 중앙 정렬
컨트롤에 색상을 지정
다크 테마를 적용
v-tabs-item min-width 160px (72px mobile), max-width 264px
Components.Tabs.
컴포넌트의 높이를 설정
Components.Tabs.
Components.Tabs.
라이트 테마를 적용
Components.Tabs.
최대 너비(maximum width)를 설정
모바일 중단점 설정
Components.Tabs.
오른쪽 페이지네이션 아이콘
왼쪽 페이지네이션 아이콘
탭을 오른쪽으로 정렬
Components.Tabs.
Components.Tabs.
표시여부를 조절 (Controls visibility)
예제
고정된 탭 (Fixed tabs)
fixed-tabs prop 은 더 높은 최소 너비를 설정하고 새로운 최대 너비를 v-tabs-item에 적용합니다. 데스크탑 스크린에서, 탭 아이템은 v-tabs 컴포넌트위 중앙에 표시되고, 모바일에선 균등하게 채워집니다.
오른쪽으로 정렬된 탭 (Right aligned tabs)
right prop은 탭들을 오른쪽으로 정렬합니다.
컨텐츠 (Content)
v-tabs 컴포넌트에 넣을 수 있는 건 탭뿐이 아닙니다. 이 예제에서는 툴바를 추가합니다.
검색 (With search)
v-tabs 컴포넌트 안에 넣을 수 있는 다른 컨텐츠 예제입니다.
아이콘과 텍스트 (Icons and text)
icons-and-text prop을 이용해 각 탭 아이템에 아이콘을 추가할 수 있습니다.
데스크톱 탭 (Desktop tabs)
툴바 타이틀과 탭 정렬 (Align tabs with toolbar title)
v-tabs을 v-toolbar-title 컴포넌트와 함께 나열합니다. (v-toolbar-side-icon나 v-btn 컴포넌트가 v-toolbar 안에 사용되어야만 합니다. May not work if the tab text is wrapped.
Grow
grow prop을 사용하면 탭 아이템 들이 사옹가능한 모든 공간을 사용합니다.
메뉴와 함께 (With menu)
메뉴가 추가적인 탭들을 가지고 그들을 동적으로 바꿀 수 있도록 할 수 있습니다.
페이지네이션 (Pagination)
탭 아이템들이 컨테이너를 넘어설(overflow) 경우 페이지네이션으로 표시를 조절할 수 있습니다.
커스텀 아이콘 (Custom icons)
prev-icon과 next-icon를 사용하여 커스텀 페이지네이션 아이콘을 적용할 수 있습니다.