纸片组

v-chip-group 通过提供可添加的功能来添加 v-chip 组件。它用于使用纸片创建选择组。

用例

纸片组使用户可以方便地为更复杂的实现选择过滤选项。默认情况下，v-chip-group 将向右溢出，但可以更改为 column 模式。

Chip groups（纸片组） - 图1

API

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

Chip groups（纸片组） - 图2

示例

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

列

带有 column 属性的纸片组可以包装其纸片。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-col cols="12" sm="6" md="4" lg="3">
  4.       <v-sheet elevation="10" class="pa-4">
  5.         <v-chip-group
  6.           column
  7.           active-class="primary--text"
  8.         >
  9.           <v-chip v-for="tag in tags" :key="tag">
  10.             {{ tag }}
  11.           </v-chip>
  12.         </v-chip-group>
  13.       </v-sheet>
  14.     </v-col>
  15.   </v-row>
  16. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       tags: [
  5.         'Work',
  6.         'Home Improvement',
  7.         'Vacation',
  8.         'Food',
  9.         'Drawers',
  10.         'Shopping',
  11.         'Art',
  12.         'Tech',
  13.         'Creative Writing',
  14.       ],
  15.     }),
  16.   }
  17. </script>

Chip groups（纸片组） - 图3

必填项

具有 mandatory 属性的纸片组必须始终选择一个值。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-col cols="12" sm="6" md="4">
  4.       <v-sheet elevation="10" class="py-4 px-1">
  5.         <v-chip-group
  6.           mandatory
  7.           active-class="primary--text"
  8.         >
  9.           <v-chip v-for="tag in tags" :key="tag">
  10.             {{ tag }}
  11.           </v-chip>
  12.         </v-chip-group>
  13.       </v-sheet>
  14.     </v-col>
  15.   </v-row>
  16. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       tags: [
  5.         'Work',
  6.         'Home Improvement',
  7.         'Vacation',
  8.         'Food',
  9.         'Drawers',
  10.         'Shopping',
  11.         'Art',
  12.         'Tech',
  13.         'Creative Writing',
  14.       ],
  15.     }),
  16.   }
  17. </script>

Chip groups（纸片组） - 图4

多选

具有 multiple 属性的纸片组可以选择许多值。

template script

  1. <template>
  2.   <v-row justify="space-around">
  3.     <v-col cols="12" sm="6" md="4">
  4.       <v-sheet elevation="10" class="py-4 px-1">
  5.         <v-chip-group
  6.           multiple
  7.           active-class="primary--text"
  8.         >
  9.           <v-chip v-for="tag in tags" :key="tag">
  10.             {{ tag }}
  11.           </v-chip>
  12.         </v-chip-group>
  13.       </v-sheet>
  14.     </v-col>
  15.   </v-row>
  16. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       tags: [
  5.         'Work',
  6.         'Home Improvement',
  7.         'Vacation',
  8.         'Food',
  9.         'Drawers',
  10.         'Shopping',
  11.         'Art',
  12.         'Tech',
  13.         'Creative Writing',
  14.       ],
  15.     }),
  16.   }
  17. </script>

Chip groups（纸片组） - 图5

Dark Vuetify Stickers

Stick them to your car, laptop or favorite mug. They are made from a durable vinyl with a laminate that is weather-proof against rain, sun, wind and snow, and even dishwasher safe.

ads by Vuetify

](https://vuetifyjs.com/zh-Hans/components/chip-groups/ “url”: “https:/store.vuetifyjs.com/product/black-vuetify-vinyl-stickers”?ref=vuetifyjs.com)

牙刷卡片

纸片组允许创建自定义接口，这些接口执行与项组或单选控件相同的操作，但在风格上有所不同。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-card-title>
  7.       <h2 class="display-1">Toothbrush</h2>
  8.       <v-spacer></v-spacer>
  9.       <span class="title">$4.99</span>
  10.     </v-card-title>
  12.     <v-card-text>
  13.       Our company takes pride in making handmade brushes.
  14.       Our toothbrushes are available in 4 different bristel types, from extra soft to hard.
  15.     </v-card-text>
  17.     <v-divider class="mx-4"></v-divider>
  19.     <v-card-text>
  20.       <span class="subheading">Select type</span>
  22.       <v-chip-group
  23.         v-model="selection"
  24.         active-class="deep-purple--text text--accent-4"
  25.         mandatory
  26.       >
  27.         <v-chip>Extra Soft</v-chip>
  28.         <v-chip>Soft</v-chip>
  29.         <v-chip>Medium</v-chip>
  30.         <v-chip>Hard</v-chip>
  31.       </v-chip-group>
  32.     </v-card-text>
  34.     <v-card-actions>
  35.       <v-btn
  36.         block
  37.         class="white--text"
  38.         color="deep-purple accent-4"
  39.       >
  40.         Add to Cart
  41.       </v-btn>
  42.     </v-card-actions>
  43.   </v-card>
  44. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       selection: 2,
  5.     }),
  6.   }
  7. </script>

Chip groups（纸片组） - 图6

衬衫产品卡片

v-chip 组件可以具有用于其模型的显式值。这将传递给 v-chip-group 组件，在不希望使用纸片索引作为其值时非常有用。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-card-title>
  7.       <h2 class="display-1">Shirt Blouse</h2>
  8.       <v-spacer></v-spacer>
  9.       <span class="title">$44.50</span>
  10.     </v-card-title>
  12.     <v-card-text>
  13.       Our blouses are available in 8 colors. You can custom order a built-in arch support for any of the models.
  14.     </v-card-text>
  16.     <v-divider class="mx-4"></v-divider>
  18.     <v-card-text>
  19.       <span class="subheading">Select size</span>
  21.       <v-chip-group
  22.         v-model="selection"
  23.         active-class="deep-purple--text text--accent-4"
  24.         mandatory
  25.       >
  26.         <v-chip v-for="size in sizes" :key="size" :value="size">
  27.           {{ size }}
  28.         </v-chip>
  29.       </v-chip-group>
  30.     </v-card-text>
  32.     <v-card-actions>
  33.       <v-btn
  34.         block
  35.         class="white--text"
  36.         color="deep-purple accent-4"
  37.       >
  38.         Add to Cart
  39.       </v-btn>
  40.     </v-card-actions>
  41.   </v-card>
  42. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       selection: '08',
  5.       sizes: [
  6.         '04', '06', '08', '10', '12', '14',
  7.       ],
  8.     }),
  9.   }
  10. </script>

Chip groups（纸片组） - 图7

过滤结果

使用 filter 属性轻松创建纸片组，以提供更多反馈。 这创建了一种替代的视觉风格，可以与用户交流选择了纸片的情况。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-toolbar
  7.       flat
  8.       color="deep-purple accent-4"
  9.       dark
  10.     >
  11.       <v-btn icon>
  12.         <v-icon>mdi-close</v-icon>
  13.       </v-btn>
  14.       <v-toolbar-title>Filter results</v-toolbar-title>
  15.     </v-toolbar>
  17.     <v-card-text>
  18.       <h2 class="title mb-2">Choose amenities</h2>
  20.       <v-chip-group
  21.         v-model="amenities"
  22.         column
  23.         multiple
  24.       >
  25.         <v-chip filter outlined>Elevator</v-chip>
  26.         <v-chip filter outlined>Washer / Dryer</v-chip>
  27.         <v-chip filter outlined>Fireplace</v-chip>
  28.         <v-chip filter outlined>Wheelchair access</v-chip>
  29.         <v-chip filter outlined>Dogs ok</v-chip>
  30.         <v-chip filter outlined>Cats ok</v-chip>
  31.       </v-chip-group>
  32.     </v-card-text>
  34.     <v-card-text>
  35.       <h2 class="title mb-2">Choose neighborhoods</h2>
  37.       <v-chip-group
  38.         v-model="neighborhoods"
  39.         column
  40.         multiple
  41.       >
  42.         <v-chip filter outlined>Snowy Rock Place</v-chip>
  43.         <v-chip filter outlined>Honeylane Circle</v-chip>
  44.         <v-chip filter outlined>Donna Drive</v-chip>
  45.         <v-chip filter outlined>Elaine Street</v-chip>
  46.         <v-chip filter outlined>Court Street</v-chip>
  47.         <v-chip filter outlined>Kennedy Park</v-chip>
  48.       </v-chip-group>
  49.     </v-card-text>
  50.   </v-card>
  51. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       amenities: [1, 4],
  5.       neighborhoods: [1],
  6.     }),
  7.   }
  8. </script>

Chip groups（纸片组） - 图8