mirror of https://github.com/directus/directus.git synced 2026-02-03 07:25:04 -05:00

Files

Nitwel c2e7c85bbd Update documentation of app (#4222 )

* move component docs to documentation

* update app docs tables for components

* update docs

* Add components to docs sidebar

* fix generated tables

* fix tables

* rename transitions

* update tables

* update nested components

* update tables

* update tables

* update tables

* update v-table table

* add basic documentation to each component

* remove all stories of storybook

* add missing documentation

* undate tables

* update tables

* update docs sidebar

* update app docs

* remove unused references

* add general readme

* update docs

* make reference titiles smaller

* add reference tag

* improve docs

* update order of tabs in sidebar

* remove all readmes and stories from interfaces/displays

* Cleanup menu

* Remove storybook

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

2021-02-24 17:48:19 -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 boder 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 arround 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