탭 (Tab)

v-tabs 컴포넌트는 선택가능한 아이템의 뒤로 컨텐츠를 숨기는데 사용됩니다. 탭은 페이지 내에서 탭이 링크이고 탭-아이템이 컨텐츠인 것 처럼 유사-탐색(pseudo-navigation)으로 사용될 수 있습니다.

사용법


API

예제

고정된 탭 (Fixed tabs)

fixed-tabs prop 은 더 높은 최소 너비를 설정하고 새로운 최대 너비를 v-tabs-item에 적용합니다. 데스크탑 스크린에서, 탭 아이템은 v-tabs 컴포넌트위 중앙에 표시되고, 모바일에선 균등하게 채워집니다.


오른쪽으로 정렬된 탭 (Right aligned tabs)

right prop은 탭들을 오른쪽으로 정렬합니다.


컨텐츠 (Content)

v-tabs 컴포넌트에 넣을 수 있는 건 탭뿐이 아닙니다. 이 예제에서는 툴바를 추가합니다.


아이콘과 텍스트 (Icons and text)

icons-and-text prop을 이용해 각 탭 아이템에 아이콘을 추가할 수 있습니다.


데스크톱 탭 (Desktop tabs)


툴바 타이틀과 탭 정렬 (Align tabs with toolbar title)

v-tabsv-toolbar-title 컴포넌트와 함께 나열합니다. (v-toolbar-side-iconv-btn 컴포넌트가 v-toolbar 안에 사용되어야만 합니다. May not work if the tab text is wrapped.


Grow

grow prop을 사용하면 탭 아이템 들이 사옹가능한 모든 공간을 사용합니다.


메뉴와 함께 (With menu)

메뉴가 추가적인 탭들을 가지고 그들을 동적으로 바꿀 수 있도록 할 수 있습니다.


페이지네이션 (Pagination)

탭 아이템들이 컨테이너를 넘어설(overflow) 경우 페이지네이션으로 표시를 조절할 수 있습니다.


커스텀 아이콘 (Custom icons)

prev-iconnext-icon를 사용하여 커스텀 페이지네이션 아이콘을 적용할 수 있습니다.