Tabs

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

Active tab is always centered

The v-tabs-items component allows for you to customize the content per tab. Using a shared v-model, the v-tabs-items will sync with the currently selected v-tab.

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

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

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

Tabs can be toggled to stack its v-tab components vertically.

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

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

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

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

Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs component will react. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all v-tabs and the slider will disappear.

When changing your v-tab-item, the content area will smoothly scale to the new size.

You can represent v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.

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