Chip

The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction.

Utilização

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

API

props

slots

events

Nome

Padrão

false

Tipos

boolean

Components.Chips.

Nome

color

Padrão

undefined

Tipos

string

Components.Chips.

Nome

dark

Padrão

false

Tipos

boolean

Components.Chips.

Nome

disabled

Padrão

false

Tipos

boolean

Components.Chips.

Nome

label

Padrão

false

Tipos

boolean

Components.Chips.

Nome

light

Padrão

false

Tipos

boolean

Components.Chips.

Nome

outline

Padrão

false

Tipos

boolean

Components.Chips.

Nome

selected

Padrão

false

Tipos

boolean

Components.Chips.

Nome

small

Padrão

false

Tipos

boolean

Components.Chips.

Nome

text-color

Padrão

undefined

Tipos

string

Aplica uma cor específica ao texto

Nome

value

Padrão

true

Tipos

boolean

Controla visibilidade

Exemplos

Colored

Any color from the Material Design palette can be used to change a chips color.

Icon

Chips can use text or any icon available in the Material Icons font library.

Outline

Outlined chips inherit their border color from the current text color.

Label

Label chips use the v-card border-radius.

Closable

Closable chips can be controlled with a v-model. Listen to the input event if you want to know when a chip has been closed.

In selects

Selects can use chips to display the selected data. Try adding your own tags below.

Up Next

Edit this page | language on Github

— Contribution Guide