选项卡

v-tabs 组件用于将内容隐藏在可选项之后。这还可以用作页面的伪导航，其中选项卡是链接，选项卡项是内容。

用例

v-tabs 组件是 v-item-group 的样式扩展。它提供了一个易于使用的接口来组织内容组。

template

  1. <template>
  2.   <v-tabs>
  3.     <v-tab>Item One</v-tab>
  4.     <v-tab>Item Two</v-tab>
  5.     <v-tab>Item Three</v-tab>
  6.   </v-tabs>
  7. </template>

Tabs（选项卡） - 图1

当使用 dark 属性和 不 提供自定义 color 时，v-tabs 组件会将其颜色默认为 _white_。

当使用包含必填输入字段的 v-tab-item 时，你必须使用 eager prop 来验证尚未显示的必填字段。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Tabs（选项卡） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-row
  5.       justify="space-around"
  6.     >
  7.       <v-switch
  8.         v-model="icons"
  9.         class="mx-2"
  10.         label="Text + icons"
  11.       ></v-switch>
  12.       <v-switch
  13.         v-model="centered"
  14.         class="mx-2"
  15.         label="Centered"
  16.         :disabled="vertical"
  17.       ></v-switch>
  18.       <v-switch
  19.         v-model="grow"
  20.         class="mx-2"
  21.         label="Grow"
  22.       ></v-switch>
  23.       <v-switch
  24.         v-model="vertical"
  25.         class="mx-2"
  26.         label="Vertical"
  27.       ></v-switch>
  28.       <v-switch
  29.         v-model="right"
  30.         class="mx-2"
  31.         label="Right"
  32.       ></v-switch>
  33.       <v-col cols="12">
  34.         <v-slider
  35.           v-model="tabs"
  36.           min="0"
  37.           max="10"
  38.           label="Tabs number"
  39.         ></v-slider>
  40.       </v-col>
  41.     </v-row>
  43.     <v-tabs
  44.       v-model="tab"
  45.       background-color="deep-purple accent-4"
  46.       class="elevation-2"
  47.       dark
  48.       :centered="centered"
  49.       :grow="grow"
  50.       :vertical="vertical"
  51.       :right="right"
  52.       :prev-icon="prevIcon ? 'mdi-arrow-left-bold-box-outline' : undefined"
  53.       :next-icon="nextIcon ? 'mdi-arrow-right-bold-box-outline' : undefined"
  54.       :icons-and-text="icons"
  55.     >
  56.       <v-tabs-slider></v-tabs-slider>
  58.       <v-tab
  59.         v-for="i in tabs"
  60.         :key="i"
  61.         :href="`#tab-${i}`"
  62.       >
  63.         Tab {{ i }}
  64.         <v-icon v-if="icons">mdi-phone</v-icon>
  65.       </v-tab>
  67.       <v-tab-item
  68.         v-for="i in tabs"
  69.         :key="i"
  70.         :value="'tab-' + i"
  71.       >
  72.         <v-card
  73.           flat
  74.           tile
  75.         >
  76.           <v-card-text>{{ text }}</v-card-text>
  77.         </v-card>
  78.       </v-tab-item>
  79.     </v-tabs>
  80.   </div>
  81. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tab: null,
  6.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  7.         icons: false,
  8.         centered: false,
  9.         grow: false,
  10.         vertical: false,
  11.         prevIcon: false,
  12.         nextIcon: false,
  13.         right: false,
  14.         tabs: 3,
  15.       }
  16.     },
  17.   }
  18. </script>

Tabs（选项卡） - 图3

示例

下面是一些简单到复杂的例子。

固定选项卡

fixed-tabs 属性强制 v-tab 占用所有可用空间，直到最大宽度（300px）。

template

  1. <template>
  2.   <v-tabs
  3.     fixed-tabs
  4.     background-color="indigo"
  5.     dark
  6.   >
  7.     <v-tab>
  8.       Option
  9.     </v-tab>
  10.     <v-tab>
  11.       Another Selection
  12.     </v-tab>
  13.     <v-tab>
  14.       Items
  15.     </v-tab>
  16.     <v-tab>
  17.       Another Screen
  18.     </v-tab>
  19.   </v-tabs>
  20. </template>

Tabs（选项卡） - 图4

居中活动选项卡

活动选项卡总是居中

template

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       background-color="deep-purple accent-4"
  5.       center-active
  6.       dark
  7.     >
  8.       <v-tab>One</v-tab>
  9.       <v-tab>Two</v-tab>
  10.       <v-tab>Three</v-tab>
  11.       <v-tab>Four</v-tab>
  12.       <v-tab>Five</v-tab>
  13.       <v-tab>Six</v-tab>
  14.       <v-tab>Seven</v-tab>
  15.       <v-tab>Eight</v-tab>
  16.       <v-tab>Nine</v-tab>
  17.       <v-tab>Ten</v-tab>
  18.       <v-tab>Eleven</v-tab>
  19.       <v-tab>Twelve</v-tab>
  20.       <v-tab>Thirteen</v-tab>
  21.       <v-tab>Fourteen</v-tab>
  22.       <v-tab>Fifteen</v-tab>
  23.       <v-tab>Sixteen</v-tab>
  24.       <v-tab>Seventeen</v-tab>
  25.       <v-tab>Eighteen</v-tab>
  26.       <v-tab>Nineteen</v-tab>
  27.       <v-tab>Twenty</v-tab>
  28.     </v-tabs>
  29.   </v-card>
  30. </template>

Tabs（选项卡） - 图5

选项卡项目

v-tabs-items 组件允许你自定义每个标签的内容。使用共享的 v-model，v-tabs-items 将与当前选择的 v-tab 同步。

template script

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       v-model="tab"
  5.       background-color="primary"
  6.       dark
  7.     >
  8.       <v-tab
  9.         v-for="item in items"
  10.         :key="item.tab"
  11.       >
  12.         {{ item.tab }}
  13.       </v-tab>
  14.     </v-tabs>
  16.     <v-tabs-items v-model="tab">
  17.       <v-tab-item
  18.         v-for="item in items"
  19.         :key="item.tab"
  20.       >
  21.         <v-card flat>
  22.           <v-card-text>{{ item.content }}</v-card-text>
  23.         </v-card>
  24.       </v-tab-item>
  25.     </v-tabs-items>
  26.   </v-card>
  27. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tab: null,
  6.         items: [
  7.           { tab: 'One', content: 'Tab 1 Content' },
  8.           { tab: 'Two', content: 'Tab 2 Content' },
  9.           { tab: 'Three', content: 'Tab 3 Content' },
  10.           { tab: 'Four', content: 'Tab 4 Content' },
  11.           { tab: 'Five', content: 'Tab 5 Content' },
  12.           { tab: 'Six', content: 'Tab 6 Content' },
  13.           { tab: 'Seven', content: 'Tab 7 Content' },
  14.           { tab: 'Eight', content: 'Tab 8 Content' },
  15.           { tab: 'Nine', content: 'Tab 9 Content' },
  16.           { tab: 'Ten', content: 'Tab 10 Content' },
  17.         ],
  18.       }
  19.     },
  20.   }
  21. </script>

Tabs（选项卡） - 图6

扩大

grow 属性将使选项卡项目占用所有可用空间，最大宽度为 300px。

template script style

  1. <template>
  2.   <v-card color="basil">
  3.     <v-card-title class="text-center justify-center py-6">
  4.       <h1 class="font-weight-bold display-3 basil--text">BASiL</h1>
  5.     </v-card-title>
  7.     <v-tabs
  8.       v-model="tab"
  9.       background-color="transparent"
  10.       color="basil"
  11.       grow
  12.     >
  13.       <v-tab
  14.         v-for="item in items"
  15.         :key="item"
  16.       >
  17.         {{ item }}
  18.       </v-tab>
  19.     </v-tabs>
  21.     <v-tabs-items v-model="tab">
  22.       <v-tab-item
  23.         v-for="item in items"
  24.         :key="item"
  25.       >
  26.         <v-card
  27.           color="basil"
  28.           flat
  29.         >
  30.           <v-card-text>{{ text }}</v-card-text>
  31.         </v-card>
  32.       </v-tab-item>
  33.     </v-tabs-items>
  34.   </v-card>
  35. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tab: null,
  6.         items: [
  7.           'Appetizers', 'Entrees', 'Deserts', 'Cocktails',
  8.         ],
  9.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  10.       }
  11.     },
  12.   }
  13. </script>
  1. <style>
  2. /* Helper classes */
  3. .basil {
  4.   background-color: #FFFBE6 !important;
  5. }
  6. .basil--text {
  7.   color: #356859 !important;
  8. }
  9. </style>

Tabs（选项卡） - 图7

分页

如果选项卡项目超出其容器，则分页控件将出现在桌面设备。 对于移动设备，箭头将仅与 show-arrows 属性一起显示。

template

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       dark
  5.       background-color="teal darken-3"
  6.       show-arrows
  7.     >
  8.       <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
  10.       <v-tab
  11.         v-for="i in 30"
  12.         :key="i"
  13.         :href="'#tab-' + i"
  14.       >
  15.         Item {{ i }}
  16.       </v-tab>
  17.     </v-tabs>
  18.   </v-card>
  19. </template>

Tabs（选项卡） - 图8

自定义图标

prev-icon 和* next-icon* 可以用来设置分页器的自定义图标

template

  1. <template>
  2.   <v-sheet elevation="6">
  3.     <v-tabs
  4.       background-color="cyan"
  5.       dark
  6.       next-icon="mdi-arrow-right-bold-box-outline"
  7.       prev-icon="mdi-arrow-left-bold-box-outline"
  8.       show-arrows
  9.     >
  10.       <v-tabs-slider color="yellow"></v-tabs-slider>
  11.       <v-tab
  12.         v-for="i in 30"
  13.         :key="i"
  14.         :href="'#tab-' + i"
  15.       >
  16.         Item {{ i }}
  17.       </v-tab>
  18.     </v-tabs>
  19.   </v-sheet>
  20. </template>

Tabs（选项卡） - 图9

垂直选项卡

标签可以切换为垂直堆叠其 v-tab 组件。

template

  1. <template>
  2.   <v-card>
  3.     <v-toolbar flat color="primary" dark>
  4.       <v-toolbar-title>User Profile</v-toolbar-title>
  5.     </v-toolbar>
  6.     <v-tabs vertical>
  7.       <v-tab>
  8.         <v-icon left>mdi-account</v-icon>
  9.         Option 1
  10.       </v-tab>
  11.       <v-tab>
  12.         <v-icon left>mdi-lock</v-icon>
  13.         Option 2
  14.       </v-tab>
  15.       <v-tab>
  16.         <v-icon left>mdi-access-point</v-icon>
  17.         Option 3
  18.       </v-tab>
  20.       <v-tab-item>
  21.         <v-card flat>
  22.           <v-card-text>
  23.             <p>
  24.               Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.
  25.             </p>
  27.             <p>
  28.               Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Aliquam lobortis. Aliquam lobortis. Suspendisse non nisl sit amet velit hendrerit rutrum.
  29.             </p>
  31.             <p class="mb-0">
  32.               Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Phasellus blandit leo ut odio.
  33.             </p>
  34.           </v-card-text>
  35.         </v-card>
  36.       </v-tab-item>
  37.       <v-tab-item>
  38.         <v-card flat>
  39.           <v-card-text>
  40.             <p>
  41.               Morbi nec metus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Nunc sed turpis.
  42.             </p>
  44.             <p>
  45.               Suspendisse feugiat. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In hac habitasse platea dictumst. Fusce ac felis sit amet ligula pharetra condimentum.
  46.             </p>
  48.             <p>
  49.               Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Nam commodo suscipit quam. In consectetuer turpis ut velit. Sed cursus turpis vitae tortor. Aliquam eu nunc.
  50.             </p>
  52.             <p>
  53.               Etiam ut purus mattis mauris sodales aliquam. Ut varius tincidunt libero. Aenean viverra rhoncus pede. Duis leo. Fusce fermentum odio nec arcu.
  54.             </p>
  56.             <p class="mb-0">
  57.               Donec venenatis vulputate lorem. Aenean viverra rhoncus pede. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Fusce commodo aliquam arcu. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi.
  58.             </p>
  59.           </v-card-text>
  60.         </v-card>
  61.       </v-tab-item>
  62.       <v-tab-item>
  63.         <v-card flat>
  64.           <v-card-text>
  65.             <p>
  66.               Fusce a quam. Phasellus nec sem in justo pellentesque facilisis. Nam eget dui. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
  67.             </p>
  69.             <p class="mb-0">
  70.               Cras sagittis. Phasellus nec sem in justo pellentesque facilisis. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nam at tortor in tellus interdum sagittis.
  71.             </p>
  72.           </v-card-text>
  73.         </v-card>
  74.       </v-tab-item>
  75.     </v-tabs>
  76.   </v-card>
  77. </template>

Tabs（选项卡） - 图10

图标和文本

v-tab 可以包含图标和文本。这将 v-tabs 的高度增加到 72px。

template script

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       v-model="tab"
  5.       background-color="deep-purple accent-4"
  6.       centered
  7.       dark
  8.       icons-and-text
  9.     >
  10.       <v-tabs-slider></v-tabs-slider>
  12.       <v-tab href="#tab-1">
  13.         Recents
  14.         <v-icon>mdi-phone</v-icon>
  15.       </v-tab>
  17.       <v-tab href="#tab-2">
  18.         Favorites
  19.         <v-icon>mdi-heart</v-icon>
  20.       </v-tab>
  22.       <v-tab href="#tab-3">
  23.         Nearby
  24.         <v-icon>mdi-account-box</v-icon>
  25.       </v-tab>
  26.     </v-tabs>
  28.     <v-tabs-items v-model="tab">
  29.       <v-tab-item
  30.         v-for="i in 3"
  31.         :key="i"
  32.         :value="'tab-' + i"
  33.       >
  34.         <v-card flat>
  35.           <v-card-text>{{ text }}</v-card-text>
  36.         </v-card>
  37.       </v-tab-item>
  38.     </v-tabs-items>
  39.   </v-card>
  40. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tab: null,
  6.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  7.       }
  8.     },
  9.   }
  10. </script>

Tabs（选项卡） - 图11

Charcoal Vuetify Beanie

Stay warm with the new Premium Knit Vuetify Beanie available in black, navy and charcoal.

ads by Vuetify

](https://store.vuetifyjs.com/product/premium-charcoal-vuetify-beanie?ref=vuetifyjs.com)

右对齐选项卡

right属性将选项卡向右对齐。

template

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       background-color="white"
  5.       color="deep-purple accent-4"
  6.       right
  7.     >
  8.       <v-tab>Landscape</v-tab>
  9.       <v-tab>City</v-tab>
  10.       <v-tab>Abstract</v-tab>
  12.       <v-tab-item
  13.         v-for="n in 3"
  14.         :key="n"
  15.       >
  16.         <v-container fluid>
  17.           <v-row>
  18.             <v-col
  19.               v-for="i in 6"
  20.               :key="i"
  21.               cols="12"
  22.               md="4"
  23.             >
  24.               <v-img
  25.                 :src="`https://picsum.photos/500/300?image=${i * n * 5 + 10}`"
  26.                 :lazy-src="`https://picsum.photos/10/6?image=${i * n * 5 + 10}`"
  27.                 aspect-ratio="1"
  28.               ></v-img>
  29.             </v-col>
  30.           </v-row>
  31.         </v-container>
  32.       </v-tab-item>
  33.     </v-tabs>
  34.   </v-card>
  35. </template>

Tabs（选项卡） - 图12

内容

通常把 v-tabs 放在 v-toolbar 的 extension 插槽内。使用 v-toolbar 的 tabs 属性自动调整其高度为 48px，以匹配 v-tabs。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="cyan"
  5.       dark
  6.       flat
  7.     >
  8.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Page title</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-magnify</v-icon>
  16.       </v-btn>
  18.       <v-btn icon>
  19.         <v-icon>mdi-dots-vertical</v-icon>
  20.       </v-btn>
  22.       <template v-slot:extension>
  23.         <v-tabs
  24.           v-model="model"
  25.           centered
  26.           slider-color="yellow"
  27.         >
  28.           <v-tab
  29.             v-for="i in 3"
  30.             :key="i"
  31.             :href="`#tab-${i}`"
  32.           >
  33.             Item {{ i }}
  34.           </v-tab>
  35.         </v-tabs>
  36.       </template>
  37.     </v-toolbar>
  39.     <v-tabs-items v-model="model">
  40.       <v-tab-item
  41.         v-for="i in 3"
  42.         :key="i"
  43.         :value="`tab-${i}`"
  44.       >
  45.         <v-card flat>
  46.           <v-card-text v-text="text"></v-card-text>
  47.         </v-card>
  48.       </v-tab-item>
  49.     </v-tabs-items>
  50.   </v-card>
  51. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         model: 'tab-2',
  6.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  7.       }
  8.     },
  9.   }
  10. </script>

Tabs（选项卡） - 图13

与工具栏标题对齐选项卡

将 v-tabs 与 v-toolbar-title 组件对齐（v-toolbar 中必须使用 v-app-bar-nav-icon 或 v-btn ）。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="cyan"
  5.       dark
  6.       flat
  7.     >
  8.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Your Dashboard</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-magnify</v-icon>
  16.       </v-btn>
  18.       <v-btn icon>
  19.         <v-icon>mdi-dots-vertical</v-icon>
  20.       </v-btn>
  22.       <template v-slot:extension>
  23.         <v-tabs
  24.           v-model="tab"
  25.           align-with-title
  26.         >
  27.           <v-tabs-slider color="yellow"></v-tabs-slider>
  29.           <v-tab v-for="item in items" :key="item">
  30.             {{ item }}
  31.           </v-tab>
  32.         </v-tabs>
  33.       </template>
  34.     </v-toolbar>
  36.     <v-tabs-items v-model="tab">
  37.       <v-tab-item
  38.         v-for="item in items"
  39.         :key="item"
  40.       >
  41.         <v-card flat>
  42.           <v-card-text v-text="text"></v-card-text>
  43.         </v-card>
  44.       </v-tab-item>
  45.     </v-tabs-items>
  46.   </v-card>
  47. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tab: null,
  6.         items: [
  7.           'web', 'shopping', 'videos', 'images', 'news',
  8.         ],
  9.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  10.       }
  11.     },
  12.   }
  13. </script>

Tabs（选项卡） - 图14

动态选项卡

选项卡可以动态添加和删除。 这使您可以更新为任意数量，并且 v-tabs 组件会做出反应。 在此示例中，当我们添加新标签时，我们会自动更改模型以使其匹配。 随着我们添加更多标签并溢出容器，所选项目将自动滚动到视图中。 删除所有的 v-tabs，滑块将消失。

template script

  1. <template>
  2.   <v-card>
  3.     <v-tabs
  4.       v-model="tab"
  5.       background-color="red lighten-2"
  6.       dark
  7.     >
  8.       <v-tab
  9.         v-for="n in length"
  10.         :key="n"
  11.       >
  12.         Item {{ n }}
  13.       </v-tab>
  14.     </v-tabs>
  15.     <v-card-text class="text-center">
  16.       <v-btn text @click="length--">Remove Tab</v-btn>
  17.       <v-divider class="mx-4" vertical></v-divider>
  18.       <v-btn text @click="length++">Add Tab</v-btn>
  19.     </v-card-text>
  20.   </v-card>
  21. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       length: 15,
  5.       tab: null,
  6.     }),
  8.     watch: {
  9.       length (val) {
  10.         this.tab = val - 1
  11.       },
  12.     },
  13.   }
  14. </script>

Tabs（选项卡） - 图15

搜索框

更改 v-tab-item 时，内容区域将平滑缩放到新的大小。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="purple"
  5.       dark
  6.       flat
  7.       prominent
  8.     >
  9.       <v-text-field
  10.         append-icon="mic"
  11.         class="mx-4"
  12.         flat
  13.         hide-details
  14.         label="Search"
  15.         prepend-inner-icon="search"
  16.         solo-inverted
  17.       ></v-text-field>
  19.       <template v-slot:extension>
  20.         <v-tabs
  21.           v-model="tabs"
  22.           centered
  23.         >
  24.           <v-tab
  25.             v-for="n in 3"
  26.             :key="n"
  27.           >
  28.             Item {{ n }}
  29.           </v-tab>
  30.         </v-tabs>
  31.       </template>
  32.     </v-toolbar>
  34.     <v-tabs-items v-model="tabs">
  35.       <v-tab-item>
  36.         <v-card flat>
  37.           <v-card-text>
  38.             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  39.           </v-card-text>
  40.         </v-card>
  41.       </v-tab-item>
  42.       <v-tab-item>
  43.         <v-card flat>
  44.           <v-card-title class="headline">An awesome title</v-card-title>
  45.           <v-card-text>
  46.             <p>
  47.               Duis lobortis massa imperdiet quam. Donec vitae orci sed dolor rutrum auctor. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Praesent congue erat at massa.
  48.             </p>
  50.             <p>
  51.               Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Etiam sit amet orci eget eros faucibus tincidunt. Donec sodales sagittis magna.
  52.             </p>
  54.             <p class="mb-0">
  55.               Ut leo. Suspendisse potenti. Duis vel nibh at velit scelerisque suscipit. Fusce pharetra convallis urna.
  56.             </p>
  57.           </v-card-text>
  58.         </v-card>
  59.       </v-tab-item>
  60.       <v-tab-item>
  61.         <v-card flat>
  62.           <v-card-title class="headline">An even better title</v-card-title>
  63.           <v-card-text>
  64.             <p>
  65.               Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed hendrerit. Maecenas malesuada. Vestibulum ullamcorper mauris at ligula. Proin faucibus arcu quis ante.
  66.             </p>
  68.             <p class="mb-0">
  69.               Etiam vitae tortor. Curabitur ullamcorper ultricies nisi. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Aliquam lobortis. Suspendisse potenti.
  70.             </p>
  71.           </v-card-text>
  72.         </v-card>
  73.       </v-tab-item>
  74.     </v-tabs-items>
  75.   </v-card>
  76. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tabs: null,
  6.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  7.       }
  8.     },
  9.   }
  10. </script>

Tabs（选项卡） - 图16

桌面选项卡

你可以用单个图标来表示 v-tab 的操作。当很容易将内容与每个选项卡关联起来时，这是很有用的。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar flat>
  4.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  6.       <v-toolbar-title>Contact Database</v-toolbar-title>
  8.       <v-spacer></v-spacer>
  10.       <v-btn icon>
  11.         <v-icon>mdi-magnify</v-icon>
  12.       </v-btn>
  14.       <v-btn icon>
  15.         <v-icon>mdi-dots-vertical</v-icon>
  16.       </v-btn>
  18.       <template v-slot:extension>
  19.         <v-tabs
  20.           v-model="tabs"
  21.           fixed-tabs
  22.         >
  23.           <v-tabs-slider></v-tabs-slider>
  24.           <v-tab
  25.             href="#mobile-tabs-5-1"
  26.             class="primary--text"
  27.           >
  28.             <v-icon>mdi-phone</v-icon>
  29.           </v-tab>
  31.           <v-tab
  32.             href="#mobile-tabs-5-2"
  33.             class="primary--text"
  34.           >
  35.             <v-icon>mdi-heart</v-icon>
  36.           </v-tab>
  38.           <v-tab
  39.             href="#mobile-tabs-5-3"
  40.             class="primary--text"
  41.           >
  42.             <v-icon>mdi-account-box</v-icon>
  43.           </v-tab>
  44.         </v-tabs>
  45.       </template>
  46.     </v-toolbar>
  48.     <v-tabs-items v-model="tabs">
  49.       <v-tab-item
  50.         v-for="i in 3"
  51.         :key="i"
  52.         :value="'mobile-tabs-5-' + i"
  53.       >
  54.         <v-card flat>
  55.           <v-card-text v-text="text"></v-card-text>
  56.         </v-card>
  57.       </v-tab-item>
  58.     </v-tabs-items>
  59.   </v-card>
  60. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         tabs: null,
  6.         text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  7.       }
  8.     },
  9.   }
  10. </script>

Tabs（选项卡） - 图17

带菜单

您可以使用菜单来保存额外的选项卡，动态地将它们交换出来。

template script

  1. <template>
  2.   <v-card>
  3.     <v-toolbar
  4.       color="deep-purple accent-4"
  5.       dark
  6.       flat
  7.     >
  8.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  10.       <v-toolbar-title>Page title</v-toolbar-title>
  12.       <v-spacer></v-spacer>
  14.       <v-btn icon>
  15.         <v-icon>mdi-magnify</v-icon>
  16.       </v-btn>
  18.       <v-btn icon>
  19.         <v-icon>mdi-dots-vertical</v-icon>
  20.       </v-btn>
  22.       <template v-slot:extension>
  23.         <v-tabs
  24.           v-model="currentItem"
  25.           fixed-tabs
  26.           slider-color="white"
  27.         >
  28.           <v-tab
  29.             v-for="item in items"
  30.             :key="item"
  31.             :href="'#tab-' + item"
  32.           >
  33.             {{ item }}
  34.           </v-tab>
  36.           <v-menu
  37.             v-if="more.length"
  38.             bottom
  39.             left
  40.           >
  41.             <template v-slot:activator="{ on }">
  42.               <v-btn
  43.                 text
  44.                 class="align-self-center mr-4"
  45.                 v-on="on"
  46.               >
  47.                 more
  48.                 <v-icon right>mdi-menu-down</v-icon>
  49.               </v-btn>
  50.             </template>
  52.             <v-list class="grey lighten-3">
  53.               <v-list-item
  54.                 v-for="item in more"
  55.                 :key="item"
  56.                 @click="addItem(item)"
  57.               >
  58.                 {{ item }}
  59.               </v-list-item>
  60.             </v-list>
  61.           </v-menu>
  62.         </v-tabs>
  63.       </template>
  64.     </v-toolbar>
  66.     <v-tabs-items v-model="currentItem">
  67.       <v-tab-item
  68.         v-for="item in items.concat(more)"
  69.         :key="item"
  70.         :value="'tab-' + item"
  71.       >
  72.         <v-card flat>
  73.           <v-card-text>
  74.             <h2>{{ item }}</h2>
  75.             {{ text }}
  76.           </v-card-text>
  77.         </v-card>
  78.       </v-tab-item>
  79.     </v-tabs-items>
  80.   </v-card>
  81. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       currentItem: 'tab-Web',
  5.       items: [
  6.         'Web', 'Shopping', 'Videos', 'Images',
  7.       ],
  8.       more: [
  9.         'News', 'Maps', 'Books', 'Flights', 'Apps',
  10.       ],
  11.       text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  12.     }),
  14.     methods: {
  15.       addItem (item) {
  16.         const removed = this.items.splice(0, 1)
  17.         this.items.push(
  18.           ...this.more.splice(this.more.indexOf(item), 1)
  19.         )
  20.         this.more.push(...removed)
  21.         this.$nextTick(() => { this.currentItem = 'tab-' + item })
  22.       },
  23.     },
  24.   }
  25. </script>

Tabs（选项卡） - 图18