mirror of https://github.com/directus/directus.git synced 2026-01-30 14:58:07 -05:00

Files

Pyll Gomez 62eb1484b6 Docs Spell check (#4299 )

* 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>

2021-02-25 15:09:44 -05:00

2.1 KiB

Raw Blame History

Badge

Display a small dot in the corner of the component.

<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:

<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

2.1 KiB Raw Blame History