厚切薯条🍟

v-chip组件用于传递小块信息。使用close属性,厚切薯条变得互动,允许用户交互。

用例

Chips come in 4 primary variations. Regular, with icon, with portrait and closeable.

API

v-chip
名称
close
默认值
false
类型
boolean

添加删除按钮

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

禁用厚切薯条,使其不可选择

名称
label
默认值
false
类型
boolean

移除圆形边缘

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
outline
默认值
false
类型
boolean

删除背景并应用边框和文本颜色

名称
selected
默认值
false
类型
boolean

将选择框颜色应用于厚切薯条,主要用于在v-select中显示高亮上下文

名称
small
默认值
false
类型
boolean

减少后期薯条的尺寸

名称
text-color
默认值
undefined
类型
string

将指定的颜色应用于控件文本

名称
value
默认值
true
类型
boolean

控制可见性

示例

色彩

Material Design调色板中的任何色彩均可用于更改厚切薯条的颜色。

图标

厚切薯条可以使用Material图标字体库中的文本或任何图标。

轮廓

轮廓厚切薯条从当前的文字颜色继承它们的边框颜色。

标签

标签厚切薯条使用v-card的边框半径

可关闭

可关闭厚切薯条可以用一个v-model来控制。如果您想知道厚切薯条何时关闭,请监听input事件。

选中

选择框可以用厚切薯条来显示选定的数据。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore