Chip

El componente v-chip se utiliza para transmitir pequeñas porciones de información. Al utilizar la prop close, el chip se vuelve interactivo, permitiendo que el usuario interactúe con él..

Uso

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

API

v-chip
Nombre
close
Default
false
Type
boolean

Agrega el botón quitar

Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
dark
Default
false
Type
boolean

Aplica la variante del tema dark

Nombre
disabled
Default
false
Type
boolean

Deshabilita el chip, haciéndolo no-seleccionable

Nombre
label
Default
false
Type
boolean

Quita los círculos en los extremos

Nombre
light
Default
false
Type
boolean

Aplica la variante del tema light

Nombre
outline
Default
false
Type
boolean

Quita el fondo y aplica un color de borde y de texto

Nombre
selected
Default
false
Type
boolean

Aplica un color de selección al chip. Principalmente utilizado para resaltar texto en un v-select

Nombre
small
Default
false
Type
boolean

Disminuye el tamaño del chip

Nombre
text-color
Default
undefined
Type
string

Aplica un color especificado al texto del control

Nombre
value
Default
true
Type
boolean

Controla la visibilidad

Ejemplos

Coloreado

Cualquier color de la paleta de Material Design puede ser utilizado para cambiar el color de un chip.

Ícono

Los chips pueden usar texto o cualquier ícono disponible en la librería de Material Icons..

Contorno

El color de contorno de los chips se hereda del color de texto actual.

Etiqueta

Las etiquetas de los chips utilizan el border-radius de v-card.

Cerrable

Los chips cerrables pueden ser controlados con un v-model. Agrega un listener al evento input si quieres saber cuando un chip ha sido cerrado.

Uso en selects

Los selects pueden usar chips para mostrar selecciones de datos.

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