纸片 (Chip)

v-chip 组件用于传递小段信息。close 属性会让纸片变得可交互。此组件和 v-chip-group 组件的合用可以实现更高级的用法。

使用

卡片有以下几种变体：closeable, filter, outlined, pill。 v-chip 的默认插槽也接受头像和图标以及文本。

API

组件	描述
v-chip	主要组件

指南

v-chip 组件用于传递小段信息。close 属性会让纸片变得可交互。此组件和 v-chip-group 组件的合用可以实现更高级的用法。

属性 (Props)

与 v-btn 和 v-list 等其他组件类似 ，v-chip 组件有大量可供定制外观的道具可供选择。

可关闭的 (Closeable)

可关闭的纸片可以通过 v-model 进行控制。如果您想知道纸片组件何时关闭，也可以监听 click:close 事件。

颜色和变体

你可以使用任意来自 Material Design 调色板中的颜色，来更改纸片组件的颜色。

variant 属性可以让按钮具有不同的风格。允许的变化形式有：elevated, flat, tonal (默认), outlined, text, and plain。

值	示例	描述
elevated	Chip	用Elevates给卡片设置阴影
flat	Chip	移除卡片阴影
tonal	Chip	按钮的背景颜色被设为文字颜色的高透明度版本
outlined	Chip	以当前文字颜色绘制细边框
text	Chip	移除背景颜色和阴影
plain	Chip	移除背景颜色并且在未悬停时降低透明度

大小和密度

卡片可以通过x-small 到 x-large属性使卡片从小到大的各种尺寸。 density属性用于调整垂直间距，而不影响宽度或字体大小。

可拖动的 (Draggable)

拥有 draggable 属性的 v-chip 组件可以由鼠标拖拽。

标签 (Label)

使用 label 属性的纸片组件会拥有类似 v-card 组件的圆角。

禁止波纹效果 (No ripple)

当 ripple 属性被设为 false 时，v-chip 没有点击波纹效果。

仅有轮廓 (Outlined)

仅有轮廓的纸片从其中文本颜色继承其边框颜色。

插槽 (Slots)

图标插槽 (Icon)

纸片可以使用文本或“ Material Icons ” 字体库中可用的任何图标。

示例

以下是一系列示例，演示了 v-chip 组件的更高级和实际用途。

可操作的纸片

纸片组件可以是可交互的。如果提供了 click 事件，纸片组件就可接受点击，可以调用方法。

自定义列表

在下面的例子中，我们使用了自定义的列表来代替 v-autocomplete 组件。这样可以使其在显示可选的选项的同时，还能保留搜索和选择的功能。

可展开的列表

纸片组件可与 v-menu 组合使用，可以实现纸片组件的特定功能。

纸片组件过滤信息

纸片组件可以在一些特别的工作中提供辅助操作。在下面的例子中，我们可以搜索某个列表，从中提取出关键字，以纸片的形式显示在搜索框下面。

纸片组件用于选择

可以使用纸片组件显示已选择的选项。尝试在下方添加你自己的标签。