分割线

v-divider 组件用于分隔列表或布局的各个部分。

用例

最简单的分隔线显示一条水平线。

template

  1. <template>
  2.   <v-divider></v-divider>
  3. </template>

Dividers（分隔线） - 图1

API

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

Dividers（分隔线） - 图2

实战场

template script

  1. <template>
  2.   <div class="grey lighten-5 pa-4">
  3.     <v-toolbar
  4.       v-if="variant === 'vertical'"
  5.       color="gray"
  6.     >
  7.       <v-toolbar-title>Title</v-toolbar-title>
  9.       <v-divider
  10.         class="mx-4"
  11.         :inset="inset"
  12.         vertical
  13.       ></v-divider>
  15.       <v-spacer></v-spacer>
  17.       <v-toolbar-items>
  18.         <v-btn text>
  19.           News
  20.         </v-btn>
  22.         <v-divider :inset="inset" vertical></v-divider>
  24.         <v-btn text>
  25.           Blog
  26.         </v-btn>
  28.         <v-divider :inset="inset" vertical></v-divider>
  30.         <v-btn text>
  31.           Music
  32.         </v-btn>
  34.         <v-divider :inset="inset" vertical></v-divider>
  35.       </v-toolbar-items>
  37.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  38.     </v-toolbar>
  40.     <v-row v-else>
  41.       <v-col cols="12" sm="6" offset-sm="3">
  42.         <v-card>
  43.           <v-list>
  44.             <v-list-item @click="">
  45.               <v-list-item-action>
  46.                 <v-icon>mdi-inbox-arrow-down</v-icon>
  47.               </v-list-item-action>
  48.               <v-list-item-content>
  49.                 <v-list-item-title>I'm a list item</v-list-item-title>
  50.               </v-list-item-content>
  51.             </v-list-item>
  53.             <v-list-item @click="">
  54.               <v-list-item-action>
  55.                 <v-icon>mdi-inbox-arrow-down</v-icon>
  56.               </v-list-item-action>
  57.               <v-list-item-content>
  58.                 <v-list-item-title>I'm a list item</v-list-item-title>
  59.               </v-list-item-content>
  60.             </v-list-item>
  62.             <v-list-item @click="">
  63.               <v-list-item-action>
  64.                 <v-icon>mdi-inbox-arrow-down</v-icon>
  65.               </v-list-item-action>
  66.               <v-list-item-content>
  67.                 <v-list-item-title>I'm a list item</v-list-item-title>
  68.               </v-list-item-content>
  69.             </v-list-item>
  71.             <v-divider :inset="inset"></v-divider>
  73.             <v-subheader>Subheader</v-subheader>
  75.             <v-list-item @click="">
  76.               <v-list-item-action>
  77.                 <v-icon>mdi-folder</v-icon>
  78.               </v-list-item-action>
  79.               <v-list-item-content>
  80.                 <v-list-item-title>I'm a list item</v-list-item-title>
  81.               </v-list-item-content>
  82.             </v-list-item>
  84.             <v-divider :inset="inset"></v-divider>
  86.             <v-list-item @click="">
  87.               <v-list-item-action>
  88.                 <v-icon>mdi-folder</v-icon>
  89.               </v-list-item-action>
  90.               <v-list-item-content>
  91.                 <v-list-item-title>I'm a list item</v-list-item-title>
  92.               </v-list-item-content>
  93.             </v-list-item>
  95.             <v-divider :inset="inset"></v-divider>
  97.             <v-list-item @click="">
  98.               <v-list-item-action>
  99.                 <v-icon>mdi-folder</v-icon>
  100.               </v-list-item-action>
  101.               <v-list-item-content>
  102.                 <v-list-item-title>I'm a list item</v-list-item-title>
  103.               </v-list-item-content>
  104.             </v-list-item>
  105.           </v-list>
  106.         </v-card>
  107.       </v-col>
  108.     </v-row>
  109.     <v-row
  110.       class="mt-12"
  111.       align="center"
  112.       justify="center"
  113.     >
  114.       <v-col
  115.         cols="12"
  116.         md="8"
  117.       >
  118.         <v-select
  119.           v-model="variant"
  120.           :items="items"
  121.           clearable
  122.           label="Variant"
  123.           light
  124.         ></v-select>
  125.         <template>
  126.           <v-checkbox
  127.             v-model="inset"
  128.             hide-details
  129.             label="Inset"
  130.             light
  131.           ></v-checkbox>
  132.         </template>
  133.       </v-col>
  134.     </v-row>
  135.   </div>
  136. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       inset: false,
  5.       items: [
  6.         'default',
  7.         'vertical',
  8.       ],
  9.       variant: 'default',
  10.     }),
  11.   }
  12. </script>

Dividers（分隔线） - 图3

示例

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

嵌入式分隔线

嵌入式分隔线向右移动 72px。 这将使他们与列表项对齐。

template script

  1. <template>
  2.   <v-row>
  3.     <v-col cols="12" sm="6" offset-sm="3">
  4.       <v-card>
  5.         <v-list two-line>
  6.           <template v-for="(item, index) in items.slice(0, 6)">
  7.             <v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
  8.             <v-divider v-else-if="item.divider" :key="index" :inset="item.inset"></v-divider>
  9.             <v-list-item v-else :key="item.title" @click="">
  10.               <v-list-item-avatar>
  11.                 <img :src="item.avatar">
  12.               </v-list-item-avatar>
  13.               <v-list-item-content>
  14.                 <v-list-item-title v-html="item.title"></v-list-item-title>
  15.                 <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
  16.               </v-list-item-content>
  17.             </v-list-item>
  18.           </template>
  19.         </v-list>
  20.       </v-card>
  21.     </v-col>
  22.   </v-row>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         { header: 'Today' },
  6.         { avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg', title: 'Brunch this weekend?', subtitle: "<span class='font-weight-bold'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?" },
  7.         { divider: true, inset: true },
  8.         { avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg', title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>', subtitle: "<span class='font-weight-bold'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend." },
  9.         { divider: true, inset: true },
  10.         { avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg', title: 'Oui oui', subtitle: "<span class='font-weight-bold'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?" },
  11.       ],
  12.     }),
  13.   }
  14. </script>

Dividers（分隔线） - 图4

垂直分割线

垂直分隔线为您提供了更多用于独特布局的工具。

template

  1. <template>
  2.   <v-toolbar
  3.     color="purple"
  4.     dark
  5.   >
  6.     <v-toolbar-title>Title</v-toolbar-title>
  8.     <v-divider
  9.       class="mx-4"
  10.       vertical
  11.     ></v-divider>
  13.     <span class="subheading">My Home</span>
  15.     <v-spacer></v-spacer>
  17.     <v-toolbar-items class="hidden-sm-and-down">
  18.       <v-btn text>
  19.         News
  20.       </v-btn>
  22.       <v-divider vertical></v-divider>
  24.       <v-btn text>
  25.         Blog
  26.       </v-btn>
  28.       <v-divider vertical></v-divider>
  30.       <v-btn text>
  31.         Music
  32.       </v-btn>
  34.       <v-divider vertical></v-divider>
  35.     </v-toolbar-items>
  37.     <v-app-bar-nav-icon></v-app-bar-nav-icon>
  38.   </v-toolbar>
  39. </template>

Dividers（分隔线） - 图5

垂直的嵌入式分割线

垂直分割线还可以与 inset 属性一起使用，以获得更多选项。

template

  1. <template>
  2.   <v-toolbar
  3.     color="teal"
  4.     dark
  5.   >
  6.     <v-toolbar-title>Title</v-toolbar-title>
  8.     <v-divider
  9.       class="mx-4"
  10.       inset
  11.       vertical
  12.     ></v-divider>
  14.     <span class="subheading">My Home</span>
  16.     <v-spacer></v-spacer>
  18.     <v-toolbar-items class="hidden-sm-and-down">
  19.       <v-btn text>
  20.         News
  21.       </v-btn>
  23.       <v-divider
  24.         inset
  25.         vertical
  26.       ></v-divider>
  28.       <v-btn text>
  29.         Blog
  30.       </v-btn>
  32.       <v-divider
  33.         inset
  34.         vertical
  35.       ></v-divider>
  37.       <v-btn text>
  38.         Music
  39.       </v-btn>
  41.       <v-divider
  42.         inset
  43.         vertical
  44.       ></v-divider>
  45.     </v-toolbar-items>
  47.     <v-app-bar-nav-icon></v-app-bar-nav-icon>
  48.   </v-toolbar>
  49. </template>

Dividers（分隔线） - 图6

Vuetify Epic Backpack

The Vuetify Epic Backpack is a premium backpack that has a spot for everything you travel with.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-epic-backpack?ref=vuetifyjs.com)

分隔线和副标题

分割线和副标题可以帮助分解内容，并可以使用相同的 inset 属性来相互对齐。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-col cols="12" sm="8" md="6">
  4.       <v-card>
  5.         <v-toolbar color="orange lighten-1" dark>
  6.           <v-app-bar-nav-icon></v-app-bar-nav-icon>
  8.           <v-toolbar-title>Message Board</v-toolbar-title>
  10.           <v-spacer></v-spacer>
  12.           <v-btn icon>
  13.             <v-icon>mdi-magnify</v-icon>
  14.           </v-btn>
  15.         </v-toolbar>
  17.         <v-list two-line>
  18.           <template v-for="(item, index) in items">
  19.             <v-subheader
  20.               v-if="item.header"
  21.               :key="item.header"
  22.               inset
  23.             >
  24.               {{ item.header }}
  25.             </v-subheader>
  27.             <v-divider
  28.               v-else-if="item.divider"
  29.               :key="index"
  30.               inset
  31.             ></v-divider>
  33.             <v-list-item
  34.               v-else
  35.               :key="item.title"
  36.               ripple
  37.               @click=""
  38.             >
  39.               <v-list-item-avatar>
  40.                 <img :src="item.avatar">
  41.               </v-list-item-avatar>
  42.               <v-list-item-content>
  43.                 <v-list-item-title v-html="item.title"></v-list-item-title>
  44.                 <v-list-item-subtitle v-html="item.subtitle"></v-list-item-subtitle>
  45.               </v-list-item-content>
  46.             </v-list-item>
  47.           </template>
  48.         </v-list>
  49.       </v-card>
  50.     </v-col>
  51.   </v-row>
  52. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         items: [
  6.           {
  7.             header: 'Today',
  8.           },
  9.           { divider: true },
  10.           {
  11.             avatar: 'https://picsum.photos/250/300?image=660',
  12.             title: 'Meeting @ Noon',
  13.             subtitle:
  14.               "<span class='font-weight-bold'>Spike Lee</span> &mdash; I'll be in your neighborhood",
  15.           },
  16.           {
  17.             avatar: 'https://picsum.photos/250/300?image=821',
  18.             title: 'Summer BBQ <span class="grey--text text--lighten-1"></span>',
  19.             subtitle:
  20.               "<span class='font-weight-bold'>to Operations support</span> &mdash; Wish I could come.",
  21.           },
  22.           {
  23.             avatar: 'https://picsum.photos/250/300?image=783',
  24.             title: 'Yes yes',
  25.             subtitle:
  26.               "<span class='font-weight-bold'>Bella</span> &mdash; Do you have Paris recommendations",
  27.           },
  28.           {
  29.             header: 'Yesterday',
  30.           },
  31.           { divider: true },
  32.           {
  33.             avatar: 'https://picsum.photos/250/300?image=1006',
  34.             title: 'Dinner tonight?',
  35.             subtitle:
  36.               "<span class='font-weight-bold'>LaToya</span> &mdash; Do you want to hang out?",
  37.           },
  38.           {
  39.             avatar: 'https://picsum.photos/250/300?image=146',
  40.             title: 'So long',
  41.             subtitle:
  42.               "<span class='font-weight-bold'>Nancy</span> &mdash; Do you see what time it is?",
  43.           },
  44.           {
  45.             header: 'Last Week',
  46.           },
  47.           { divider: true },
  48.           {
  49.             avatar: 'https://picsum.photos/250/300?image=1008',
  50.             title: 'Breakfast?',
  51.             subtitle:
  52.               "<span class='font-weight-bold'>LaToya</span> &mdash; Do you want to hang out?",
  53.           },
  54.           {
  55.             avatar: 'https://picsum.photos/250/300?image=839',
  56.             title:
  57.               'Winter Porridge <span class="grey--text text--lighten-1"></span>',
  58.             subtitle:
  59.               "<span class='font-weight-bold'>cc: Daniel</span> &mdash; Tell me more...",
  60.           },
  61.           {
  62.             avatar: 'https://picsum.photos/250/300?image=145',
  63.             title: 'Oui oui',
  64.             subtitle:
  65.               "<span class='font-weight-bold'>Nancy</span> &mdash; Do you see what time it is?",
  66.           },
  67.         ],
  68.       }
  69.     },
  70.   }
  71. </script>

Dividers（分隔线） - 图7

人像视图中的分隔符

创建自定义卡片以适应任何用例

template

  1. <template>
  2.   <v-row justify="center">
  3.     <v-col cols="12" sm="8">
  4.       <v-card>
  5.         <v-card-title class="cyan darken-1">
  6.           <span class="headline white--text">Sarah Mcbeal</span>
  8.           <v-spacer></v-spacer>
  10.           <v-btn dark icon>
  11.             <v-icon>mdi-chevron-left</v-icon>
  12.           </v-btn>
  14.           <v-btn dark icon>
  15.             <v-icon>mdi-pencil</v-icon>
  16.           </v-btn>
  18.           <v-btn dark icon>
  19.             <v-icon>mdi-dots-vertical</v-icon>
  20.           </v-btn>
  21.         </v-card-title>
  23.         <v-list>
  24.           <v-list-item @click="">
  25.             <v-list-item-action>
  26.               <v-icon>mdi-phone</v-icon>
  27.             </v-list-item-action>
  29.             <v-list-item-content>
  30.               <v-list-item-title>(650) 555-1234</v-list-item-title>
  31.             </v-list-item-content>
  32.             <v-list-item-action>
  34.               <v-icon>mdi-message-text</v-icon>
  35.             </v-list-item-action>
  36.           </v-list-item>
  38.           <v-divider inset></v-divider>
  40.           <v-list-item @click="">
  41.             <v-list-item-action>
  42.               <v-icon>mdi-phone</v-icon>
  43.             </v-list-item-action>
  45.             <v-list-item-content>
  46.               <v-list-item-title>(323) 555-6789</v-list-item-title>
  47.             </v-list-item-content>
  49.             <v-list-item-action>
  50.               <v-icon>mdi-message-text</v-icon>
  51.             </v-list-item-action>
  52.           </v-list-item>
  54.           <v-divider inset></v-divider>
  56.           <v-list-item @click="">
  57.             <v-list-item-action>
  58.               <v-icon>mdi-email</v-icon>
  59.             </v-list-item-action>
  61.             <v-list-item-content>
  62.               <v-list-item-title>mcbeal@example.com</v-list-item-title>
  63.             </v-list-item-content>
  64.           </v-list-item>
  66.           <v-divider inset></v-divider>
  68.           <v-list-item @click="">
  69.             <v-list-item-action>
  70.               <v-icon>mdi-map-marker</v-icon>
  71.             </v-list-item-action>
  73.             <v-list-item-content>
  74.               <v-list-item-title>Orlando, FL 79938</v-list-item-title>
  75.             </v-list-item-content>
  76.           </v-list-item>
  77.         </v-list>
  79.         <v-img
  80.           src="https://picsum.photos/700?image=996"
  81.           height="200px"
  82.         ></v-img>
  83.       </v-card>
  84.     </v-col>
  85.   </v-row>
  86. </template>

Dividers（分隔线） - 图8

无障碍

默认情况下，v-diver 组件被分配给 WAI-ARIA 的角色 separator，它表示分隔符“分离并区分菜单项的内容部分或组别。 然而，有时分隔符只是使界面看起来很好的一种方式。在这种情况下， presentation 应使用表示“一个其隐性本地角色语义不会映射到可访问性 API 的元素”。 要覆盖默认的 separator 角色在 v-divider 中，只需添加一个 role="presentation" 属性到您的组件。 此外，v-divider 组件有一个 aria-orientation="vertical"。如果 vertical="true"，那么 aria-orientation="undefined" 也会自动设置。如果 role="presentation", aria-orientation="undefined"，那么就会应用默认值。