Vuetify

商店

企业版

v-chip 组件用于传递小段信息。close 属性会让纸片变得可交互。此组件由 v-chip-group 用于高级选项。

纸片有以下变量: Default, closeable, filter, outlined, pill。 默认的 v-chip 插槽文本的旁边也接受头像和图标。

Options

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

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

Material Design 调色板中的任何颜色都可用于更改纸片颜色。

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

轮廓纸片从当前文本颜色继承其边框颜色。

标签纸片使用 v-card border-radius。

v-chip 组件可以拥有不同的大小,从 x-smallx-large

draggable v-chip 组件可以被鼠标拖放。

v-chip 组件有 filter 选项,如果纸片处于活动状态,那么就会在该纸片内向您显示一个额外的图标。可以使用 filter-icon 自定义。

如果 ripple 属性设置为 false,则 v-chip 将不会渲染涟漪。

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

纸片可以被操作。如果提供了click 事件,芯片将变成交互式的,并且可以调用方法。

选择框可以使用纸片显示所选数据。请尝试在下面添加您自己的标签。

在本例中,我们选择使用自定义列表来替代 v-autocomplete。这允许我们始终显示可用的选项,同时仍然提供相同的搜索和选择功能。

纸片非常适合为特定任务提供辅助操作。在本例中,我们搜索项目列表并收集信息子集以显示可用的关键字。

纸片可以与 v-menu 结合使用,以启用纸片的一组特定动作。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!