mirror of https://github.com/directus/directus.git synced 2026-01-29 04:48:05 -05:00

Files

Rijk van Zanten 622570cc45 Add presets settings (#517 )

* Add shared component creation modal

* Add bookmark strings

* Expose save-as-bookmark method

* Fix typing of filter

* Add save bookmark button

* Add presets browse page

* Add select / delete functionality

* Render null value in layout as value-null

* Start on presets detail view

* Render presets detail view

* Save view options correctly

* Add readonly mode to cards layout

* Add layout drawer to presets detail

* Add delete on detail

* Add empty state

* Fix linter warnings

2020-05-04 12:31:11 -04:00

index.ts

Migrate existing (finished) base components

2020-02-05 15:11:40 -05:00

readme.md

Interface image (#510 )

2020-04-30 17:01:14 -04:00

v-button.story.ts

Rework save options to be re-usable across modules (#346 )

2020-04-07 11:33:55 -04:00

v-button.test.ts

Use items (#354 )

2020-04-07 15:40:49 -04:00

v-button.vue

Add presets settings (#517 )

2020-05-04 12:31:11 -04:00

readme.md

Button

<v-button>Click me!</v-button>

Sizes

The button component supports the following sizes through the use of props:

x-small
small
(default)
large
x-large

Colors

You can set the color, background color, hover color, and background hover color with the --v-button-color, --v-button-background-color, --v-button-color-hover, and --v-button-background-color-hover css variables respectively:

<v-button>Click me</v-button>

<style>
.v-button {
	--v-button-color: var(--red);
	--v-button-background-color: var(--red-50);
	--v-button-color-hover: var(--white);
	--v-button-background-color-hover: var(--red);
}
</style>

Loading

The button has a loading state that can be enabled with the loading prop. By default, the button will render a v-spinner. You can override what's being shown during the loading state by using the #loading slot:

<v-button>
	<template #loading>
		... Almost done ...
	</template>
</v-button>

The loading slot is rendered on top of the content that was there before. Make sure that your loading content doesn't exceed the size of the default state content. This restriction is put in place to prevent jumps when going from and to the loading state.

Props

Prop	Description	Default
`block`	Enable full width (display block)	`false`
`icon`	Remove padding / min-width. Meant to be used with just an icon as content	`false`
`outlined`	No background	`false`
`rounded`	Enable rounded corners	`false`
`type`	HTML `type` attribute	`'button'`
`disabled`	Disabled state	`false`
`loading`	Loading state	`false`
`x-small`	Render extra small	`false`
`small`	Render small	`false`
`large`	Render large	`false`
`x-large`	Render extra large	`false`
`to`	Render as vue router-link	`null`
`href`	Render as anchor	`null`
`align`	Align content in button. One of `left	center
`dashed`	Render the border dashed. Meant to be used with `outlined`.	`false`
`tile`	Render without border radius	`false`
`download`	Add the `download` attribute (used in combo with `href`)	`null`

Slots

Slot	Description
default	Button content
`loading`	Content that's rendered during loading state
`prepend-outer`	Content that's rendered before the button
`append-outer`	Content that's rendered after the button

Events

Event	Description	Value
`click`	User clicks on button	`MouseEvent`

CSS Variables

Variable	Default
`--v-button-width`	`auto`
`--v-button-height`	`44px`
`--v-button-color`	`var(--foreground-inverted)`
`--v-button-color-hover`	`var(--foreground-inverted)`
`--v-button-color-activated`	`var(--foreground-inverted)`
`--v-button-color-disabled`	`var(--primary)`
`--v-button-background-color`	`var(--primary)`
`--v-button-background-color-hover`	`var(--primary)`
`--v-button-background-color-activated`	`var(--primary)`
`--v-button-background-color-disabled`	`var(--primary-alt)`
`--v-button-font-size`	`16px`