Chip #
Chip - it is a compact element for displaying data or performing an action.
Examples #
Default #
Default usage of the va-chip
component.
Outline #
Outline style without background.
Flat #
Flat style without borders and background.
Square #
Makes your va-chip
square.
Color #
You can use the va-chip
component with different colors.
Size #
Set different tag sizes using size presets.
Icon #
You can use icons in tag.
Closeable #
A tag can be closed by applying the closeable
property.
Link #
It makes your tag clickable.
Shadow #
You can set a shadow.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeClass |
| - | |
append |
| - | |
ariaCloseLabel |
|
| |
closeable |
|
| |
color |
|
| |
disabled |
|
| |
exact |
| - | |
exactActiveClass |
| - | |
flat |
|
| |
href |
| - | |
icon |
|
| |
modelValue |
|
| |
outline |
|
| |
preset |
| - | |
readonly |
|
| |
replace |
| - | |
shadow |
|
| |
size |
|
| |
square |
|
| |
stateful |
|
| |
tag |
|
| |
target |
| - | |
to |
| - |
Events #
Name | Description |
---|---|
focus | On focus. |
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |
Css Variables #
Name | Default Value |
---|---|
--va-chip-display | inline-flex |
--va-chip-border | 0.125rem solid transparent |
--va-chip-position | relative |
--va-chip-border-radius | 2rem |
--va-chip-width | auto |
--va-chip-height | auto |
--va-chip-min-width | initial |
--va-chip-min-height | initial |
--va-chip-padding | 0 0.3rem |
--va-chip-color | #ffffff |
--va-chip-cursor | default |
--va-chip-font-size | 1rem |
--va-chip-vertical-align | middle |
--va-chip-inner-display | inline-flex |
--va-chip-inner-align-items | center |
--va-chip-inner-width | 100% |
--va-chip-hover-opacity | 0.85 |
--va-chip-content-display | flex |
--va-chip-content-width | var(--va-chip-inner-width, 100%) |
--va-chip-content-align-items | center |
--va-chip-content-justify-content | center |
--va-chip-content-padding | 0 0.3rem |
--va-chip-content-line-height | 1.6 |
--va-chip-square-border-radius | 0.2rem |
--va-chip-sm-height | 1.5rem |
--va-chip-sm-font-size | 0.875rem |
--va-chip-lg-height | 2.5rem |
--va-chip-lg-font-size | 1.25rem |