mirror of
https://github.com/directus/directus.git
synced 2026-01-31 06:27:58 -05:00
88 lines
3.2 KiB
Markdown
88 lines
3.2 KiB
Markdown
# Chip
|
|
|
|
Chips are small round components that can be used to display tags or similar data.
|
|
|
|
```html
|
|
<v-chip>I'm a chip!</v-chip>
|
|
```
|
|
|
|
## Sizes
|
|
|
|
The chip component supports the following sizes through the use of props:
|
|
|
|
- x-small
|
|
- small
|
|
- (default)
|
|
- large
|
|
- x-large
|
|
|
|
```html
|
|
<v-chip x-small>I'm a chip!</v-chip>
|
|
```
|
|
|
|
## Colors
|
|
|
|
You can set the color, background color, hover color, and background hover color with the `--v-chip-color`,
|
|
`--v-chip-background-color`, `--v-chip-color-hover`, and `--v-chip-background-color-hover` css variables respectively:
|
|
|
|
```html
|
|
<v-chip>I'm a chip!</v-chip>
|
|
<style>
|
|
.v-chip {
|
|
--v-chip-color: var(--red);
|
|
--v-chip-background-color: var(--red-50);
|
|
--v-chip-color-hover: var(--white);
|
|
--v-chip-background-color-hover: var(--red);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Clicks / Closes
|
|
|
|
There are two events, one when clicking on the chip called `click` and one when clicking on the enabled close icon
|
|
called `close`.
|
|
|
|
```html
|
|
<v-chip @click="sayHi">Hello!</v-chip>
|
|
<v-chip close @close="close">I'm closeable!</v-chip>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ------------ | ---------------------------------------------------- | --------- | --------- |
|
|
| `active` | Change visibility. Can be reacted to via `sync` | `null` | `Boolean` |
|
|
| `close` | Displays a close icon which triggers the close event | `false` | `Boolean` |
|
|
| `close-icon` | Which icon should be displayed instead of `close ` | `'close'` | `String` |
|
|
| `outlined` | No background | `false` | `Boolean` |
|
|
| `label` | Label style | `true` | `Boolean` |
|
|
| `disabled` | Disabled state | `false` | `Boolean` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ----------- | ---- |
|
|
| _default_ | | -- |
|
|
|
|
#### Events
|
|
|
|
| Event | Description | Value |
|
|
| --------------- | ---------------------------------------------------------------------------------------------- | ----- |
|
|
| `click` | Triggers when clicked somewhere on the chip | |
|
|
| `close` | Triggers when the `close` prop is enabled and gets clicked (Doesn't trigger the `click` event) | |
|
|
| `update:active` | | |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| --------------------------------- | ------------------------------ |
|
|
| `--v-chip-color` | `var(--foreground-normal)` |
|
|
| `--v-chip-background-color` | `var(--background-normal-alt)` |
|
|
| `--v-chip-color-hover` | `var(--white)` |
|
|
| `--v-chip-background-color-hover` | `var(--primary-125)` |
|
|
| `--v-chip-close-color` | `var(--danger)` |
|
|
| `--v-chip-close-color-disabled` | `var(--primary)` |
|
|
| `--v-chip-close-color-hover` | `var(--primary-125)` |
|