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 |