副标题

v-subheader 组件用于分隔列表的各个部分。

用例

最简单形式的副标题显示带有默认主题的副标题。

template

  1. <template>
  2.   <v-subheader>Subheader</v-subheader>
  3. </template>

Subheaders（副标题） - 图1

API

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

Subheaders（副标题） - 图2

实战场

template script

  1. <template>
  2.   <div class="grey lighten-5 pa-4">
  3.     <v-row
  4.       align="center"
  5.       justify="center"
  6.     >
  7.       <v-col
  8.         cols="12"
  9.         md="8"
  10.         sm="4"
  11.       >
  12.         <v-card>
  13.           <v-subheader :inset="inset">Subheader</v-subheader>
  15.           <v-list>
  16.             <template v-for="(item, index) in items">
  17.               <v-list-item
  18.                 v-if="item.action"
  19.                 :key="item.title"
  20.                 @click=""
  21.               >
  22.                 <v-list-item-action>
  23.                   <v-icon>{{ item.action }}</v-icon>
  24.                 </v-list-item-action>
  26.                 <v-list-item-content>
  27.                   <v-list-item-title>{{ item.title }}</v-list-item-title>
  28.                 </v-list-item-content>
  29.               </v-list-item>
  31.               <v-divider
  32.                 v-else-if="item.divider"
  33.                 :key="index"
  34.               ></v-divider>
  35.             </template>
  36.           </v-list>
  37.         </v-card>
  38.       </v-col>
  39.     </v-row>
  40.     <v-row
  41.       class="mt-12"
  42.       align="center"
  43.       justify="center"
  44.     >
  45.       <v-col
  46.         cols="12"
  47.         md="8"
  48.       >
  49.         <template>
  50.           <v-checkbox
  51.             v-model="inset"
  52.             hide-details
  53.             label="Inset"
  54.             light
  55.           ></v-checkbox>
  56.         </template>
  57.       </v-col>
  58.     </v-row>
  59.   </div>
  60. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       inset: false,
  5.       items: [
  6.         {
  7.           action: 'inbox',
  8.           title: 'inbox',
  9.         },
  10.         {
  11.           divider: true,
  12.         },
  13.         {
  14.           action: 'send',
  15.           title: 'send',
  16.         },
  17.         {
  18.           divider: true,
  19.         },
  20.         {
  21.           action: 'delete',
  22.           title: 'trash',
  23.         },
  24.       ],
  25.     }),
  26.   }
  27. </script>

Subheaders（副标题） - 图3

示例

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

内嵌副标题

内嵌副标题向右移动 72px。 这使您可以选择将它们与列表项和插入分隔符对齐。

template script

  1. <template>
  2.   <v-col cols="12" sm="6" offset-sm="3">
  3.     <v-card>
  4.       <v-subheader :inset="inset">Subheader</v-subheader>
  6.       <v-list>
  7.         <template v-for="(item, index) in items">
  8.           <v-list-item
  9.             v-if="item.action"
  10.             :key="item.title"
  11.             @click=""
  12.           >
  13.             <v-list-item-action>
  14.               <v-icon>{{ item.action }}</v-icon>
  15.             </v-list-item-action>
  17.             <v-list-item-content>
  18.               <v-list-item-title>{{ item.title }}</v-list-item-title>
  19.             </v-list-item-content>
  20.           </v-list-item>
  22.           <v-divider
  23.             v-else-if="item.divider"
  24.             :key="index"
  25.             :inset="inset"
  26.           ></v-divider>
  27.         </template>
  28.       </v-list>
  29.     </v-card>
  30.   </v-col>
  31. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       inset: true,
  5.       items: [
  6.         {
  7.           action: 'label',
  8.           title: 'List item 1',
  9.         },
  10.         {
  11.           divider: true,
  12.         },
  13.         {
  14.           action: 'label',
  15.           title: 'List item 2',
  16.         },
  17.         {
  18.           divider: true,
  19.         },
  20.         {
  21.           action: 'label',
  22.           title: 'List item 3',
  23.         },
  24.       ],
  25.     }),
  26.   }
  27. </script>

Subheaders（副标题） - 图4

栅格副标题

一个副标题可以添加上下文到用户正在看的东西。

template

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card>
  5.         <v-toolbar color="white" flat>
  6.           <v-btn icon light>
  7.             <v-icon color="grey darken-2">mdi-arrow-left</v-icon>
  8.           </v-btn>
  10.           <v-toolbar-title class="grey--text text--darken-4">Albums</v-toolbar-title>
  12.           <v-spacer></v-spacer>
  14.           <v-btn icon light>
  15.             <v-icon color="grey darken-2">mdi-magnify</v-icon>
  16.           </v-btn>
  17.         </v-toolbar>
  19.         <v-subheader>May</v-subheader>
  20.         <v-container fluid>
  21.           <v-row>
  22.             <v-col
  23.               v-for="i in 6"
  24.               :key="i"
  25.               cols="4"
  26.             >
  27.               <img
  28.                 :src="`https://randomuser.me/api/portraits/men/${i + 20}.jpg`"
  29.                 alt="lorem"
  30.                 class="image"
  31.                 height="100%"
  32.                 width="100%"
  33.               >
  34.             </v-col>
  35.           </v-row>
  36.         </v-container>
  38.         <v-subheader>June</v-subheader>
  39.         <v-container fluid>
  40.           <v-row>
  41.             <v-col
  42.               v-for="i in 6"
  43.               :key="i"
  44.               cols="4"
  45.             >
  46.               <img
  47.                 :src="`https://randomuser.me/api/portraits/women/${i + 5}.jpg`"
  48.                 alt="lorem"
  49.                 class="image"
  50.                 height="100%"
  51.                 width="100%"
  52.               >
  53.             </v-col>
  54.           </v-row>
  55.         </v-container>
  57.         <v-footer class="mt-12"></v-footer>
  58.       </v-card>
  59.     </v-col>
  60.   </v-row>
  61. </template>

Subheaders（副标题） - 图5

Enterprise support through Tidelift

The Tidelift Subscription is a managed open source subscription for application dependencies.

ads by Vuetify

]($a0bade116661502f.md)

菜单副标题

使用副标题可以帮助分离不同类型的操作。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card>
  5.         <v-toolbar color="teal" dark>
  6.           <v-app-bar-nav-icon></v-app-bar-nav-icon>
  8.           <v-toolbar-title>Manage</v-toolbar-title>
  10.           <v-spacer></v-spacer>
  12.           <v-btn icon>
  13.             <v-icon>mdi-dots-vertical</v-icon>
  14.           </v-btn>
  15.         </v-toolbar>
  17.         <v-list>
  18.           <template v-for="(item, index) in items">
  19.             <v-list-item
  20.               v-if="item.action"
  21.               :key="item.title"
  22.               @click=""
  23.             >
  24.               <v-list-item-action>
  25.                 <v-icon>{{ item.action }}</v-icon>
  26.               </v-list-item-action>
  28.               <v-list-item-content>
  29.                 <v-list-item-title>{{ item.title }}</v-list-item-title>
  30.               </v-list-item-content>
  31.             </v-list-item>
  33.             <v-divider
  34.               v-else-if="item.divider"
  35.               :key="index"
  36.             ></v-divider>
  38.             <v-subheader
  39.               v-else-if="item.header"
  40.               :key="item.header"
  41.             >
  42.               {{ item.header }}
  43.             </v-subheader>
  44.           </template>
  45.         </v-list>
  46.       </v-card>
  47.     </v-col>
  48.   </v-row>
  49. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             action: 'move_to_inbox',
  8.             title: 'Inbox',
  9.           },
  10.           {
  11.             action: 'send',
  12.             title: 'Sent',
  13.           },
  14.           {
  15.             action: 'delete',
  16.             title: 'Trash',
  17.           },
  18.           {
  19.             action: 'report',
  20.             title: 'Spam',
  21.           },
  22.           { divider: true },
  23.           { header: 'Labels' },
  24.           {
  25.             action: 'label',
  26.             title: 'Family',
  27.           },
  28.           {
  29.             action: 'label',
  30.             title: 'Friends',
  31.           },
  32.           {
  33.             action: 'label',
  34.             title: 'Work',
  35.           },
  36.         ],
  37.       }
  38.     },
  39.   }
  40. </script>

Subheaders（副标题） - 图6

带社交媒体的副标题

在社交媒体互动中使用子标题。

template script

  1. <template>
  2.   <v-card
  3.     flat
  4.     tile
  5.   >
  6.     <v-toolbar
  7.       color="cyan"
  8.       dark
  9.     >
  10.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  12.       <v-toolbar-title>Application</v-toolbar-title>
  14.       <v-spacer></v-spacer>
  16.       <v-btn icon>
  17.         <v-icon>mdi-magnify</v-icon>
  18.       </v-btn>
  19.     </v-toolbar>
  21.     <v-container
  22.       v-for="type in types"
  23.       :key="type"
  24.       class="grey lighten-4"
  25.       fluid
  26.     >
  27.       <v-subheader>{{ type }}</v-subheader>
  29.       <v-row>
  30.         <v-spacer></v-spacer>
  31.         <v-col
  32.           v-for="card in cards"
  33.           :key="card"
  34.           cols="12"
  35.           sm="6"
  36.           md="4"
  37.         >
  38.           <v-card>
  39.             <v-img
  40.               :src="`https://picsum.photos/200/300?image=${getImage()}`"
  41.               height="300px"
  42.             >
  43.               <span
  44.                 class="headline white--text pl-4 pt-4"
  45.                 v-text="card.title"
  46.               ></span>
  47.             </v-img>
  49.             <v-card-actions class="white justify-center">
  50.               <v-btn
  51.                 v-for="(social, i) in socials"
  52.                 :key="i"
  53.                 :color="social.color"
  54.                 class="white--text"
  55.                 fab
  56.                 icon
  57.                 small
  58.               >
  59.                 <v-icon>{{ social.icon }}</v-icon>
  60.               </v-btn>
  61.             </v-card-actions>
  62.           </v-card>
  63.         </v-col>
  64.       </v-row>
  65.     </v-container>
  66.   </v-card>
  67. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       types: ['Places to Be', 'Places to See'],
  5.       cards: ['Good', 'Best', 'Finest'],
  6.       socials: [
  7.         {
  8.           icon: 'mdi-facebook',
  9.           color: 'indigo',
  10.         },
  11.         {
  12.           icon: 'mdi-linkedin',
  13.           color: 'cyan darken-1',
  14.         },
  15.         {
  16.           icon: 'mdi-instagram',
  17.           color: 'red lighten-3',
  18.         },
  19.       ],
  20.     }),
  22.     methods: {
  23.       getImage () {
  24.         const min = 550
  25.         const max = 560
  27.         return Math.floor(Math.random() * (max - min + 1)) + min
  28.       },
  29.     },
  30.   }
  31. </script>

Subheaders（副标题） - 图7