mirror of
https://github.com/directus/directus.git
synced 2026-02-06 03:25:04 -05:00
62eb1484b6
* Rotate JPG image on upload #4206 * fixes #3949 width/height generated for gif and tif * API hooks for event added for auth.login #4079 * updated doc for api hooks for new auth.login event * Style tweaks * Update docs * Tweak docs some more * Spelling error * Allow non-required flags and pass to hook * SDK - Persistent login refresh fixes #4113 * Fixed #4145 SDK, Token Expired error * Spell check * Docs Spell check * Docs Spell check * Docs Spell check Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
50 lines
2.1 KiB
Markdown
50 lines
2.1 KiB
Markdown
# Badge
|
|
|
|
Display a small dot in the corner of the component.
|
|
|
|
```html
|
|
<v-badge value="2"><v-icon>ABC</v-icon></v-badge>
|
|
```
|
|
|
|
## Colors
|
|
|
|
You can set the color, background color and border color with the `--v-badge-color`, `--v-badge-background-color` and
|
|
`--v-badge-border-color` css vars respectively:
|
|
|
|
```html
|
|
<v-badge value="11" style="--v-badge-color: var(--red-500);">
|
|
<v-icon>ABC</v-icon>
|
|
</v-badge>
|
|
```
|
|
|
|
## Reference
|
|
|
|
#### Props
|
|
|
|
| Prop | Description | Default | Type |
|
|
| ---------- | ---------------------------------------------------------------------------- | ------- | ------------------ |
|
|
| `value` | The value that will be displayed inside the badge Only 2 characters allowed) | `null` | `[String, Number]` |
|
|
| `dot` | Only will show a small dot without any content | `false` | `Boolean` |
|
|
| `bordered` | Shows a border around the badge | `false` | `Boolean` |
|
|
| `left` | Aligns the badge on the left side | `false` | `Boolean` |
|
|
| `bottom` | Aligns the badge on the bottom side | `false` | `Boolean` |
|
|
| `icon` | Shows an icon instead of text | `null` | `String` |
|
|
| `disabled` | Don't render the badge | `false` | `Boolean` |
|
|
|
|
#### CSS Variables
|
|
|
|
| Variable | Default |
|
|
| ---------------------------- | ------------------------ |
|
|
| `--v-badge-color` | `var(--white)` |
|
|
| `--v-badge-background-color` | `var(--danger)` |
|
|
| `--v-badge-border-color` | `var(--background-page)` |
|
|
| `--v-badge-offset-x` | `0px` |
|
|
| `--v-badge-offset-y` | `0px` |
|
|
| `--v-badge-size` | `16px` |
|
|
|
|
#### Slots
|
|
|
|
| Slot | Description | Data |
|
|
| --------- | ----------- | ---- |
|
|
| _default_ | | |
|