탭 (Tab)

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

사용법


API

이름
active-class
디폴트
'v-tabs__item--active'
타입
string
이름
align-with-title
디폴트
false
타입
boolean

v-tabs 툴바 타이틀과 함께 나열되도록 설정

이름
centered
디폴트
false
타입
boolean

탭을 중앙 정렬

이름
color
디폴트
undefined
타입
string

컨트롤에 색상을 지정

이름
dark
디폴트
false
타입
boolean

다크 테마를 적용

이름
fixed-tabs
디폴트
false
타입
boolean

v-tabs-item min-width 160px (72px mobile), max-width 264px

이름
grow
디폴트
false
타입
boolean
이름
height
디폴트
undefined
타입
number | string

컴포넌트의 높이를 설정

이름
hide-slider
디폴트
false
타입
boolean
이름
icons-and-text
디폴트
false
타입
boolean
이름
light
디폴트
false
타입
boolean

라이트 테마를 적용

이름
mandatory
디폴트
true
타입
boolean
이름
max
디폴트
undefined
타입
number | string

최대 너비(maximum width)를 설정

이름
mobile-break-point
디폴트
1264
타입
number | string

Sets the designated mobile breakpoint

이름
multiple
디폴트
false
타입
boolean
이름
next-icon
디폴트
'$vuetify.icons.next'
타입
string

오른쪽 페이지네이션 아이콘

이름
prev-icon
디폴트
'$vuetify.icons.prev'
타입
string

왼쪽 페이지네이션 아이콘

이름
right
디폴트
false
타입
boolean

탭을 오른쪽으로 정렬

이름
show-arrows
디폴트
false
타입
boolean
이름
slider-color
디폴트
'accent'
타입
string
이름
value
디폴트
undefined
타입
number | string

표시여부를 조절 (Controls visibility)

예제

고정된 탭 (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를 사용하여 커스텀 페이지네이션 아이콘을 적용할 수 있습니다.