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 | Applied when the link is active. More info here. |
| - |
| append | When set, always appends the relative path to the current path. More info here. |
| - |
| ariaCloseLabel | The aria-label of close button |
|
|
| closeable | Provides the ability to close the tag |
|
|
| color | Color of the component (theme string or |
|
|
| disabled | Applies |
|
|
| exact | Exactly match the link. Without this, '/' will match every route. More info here. |
| - |
| exactActiveClass | Applied when the link is active with exact match. More info here. |
| - |
| flat | Applies flat styling |
|
|
| href | Designates the component as anchor and applies the href attribute. More info here. |
| - |
| icon | The icon to be displayed inside a tag |
|
|
| modelValue | The value of the |
|
|
| outline | Applies outline styling |
|
|
| preset | Named preset combination of component props. |
| - |
| readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
| replace | When set, calls |
| - |
| shadow | Applies box-shadow to the component |
|
|
| size | Specify size for component. |
|
|
| square | Removes rounded corners. |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| tag | Replaces html tag. This is useful for semantics and also to allow for valid markup in some cases ( |
|
|
| target | Navigation target, More info here. |
| - |
| to | The target route of the link. More info here. |
| - |
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.375rem |
| --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 var(--va-gap-medium, 0.5rem) |
| --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-sm-content-padding | 0 var(--va-gap-small, 0.5rem) |
| --va-chip-lg-height | 2.5rem |
| --va-chip-lg-font-size | 1.25rem |
| --va-chip-lg-content-padding | 0 var(--va-gap-large, 0.5rem) |