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

Files

Rijk van Zanten 668056f3b0 Base component var scoping (#480 )

* Avatar / badge

* Move base component vars to body scope

* Fix global icon override

2020-04-24 18:52:27 -04:00

index.ts

Collections module additions (#201 )

2020-03-20 17:05:55 -04:00

readme.md

Type and color treatmeant (#281 )

2020-04-02 12:10:13 -04:00

v-card-actions.vue

Various style tweaks (#449 )

2020-04-22 13:19:20 -04:00

v-card-subtitle.vue

Type and color treatmeant (#281 )

2020-04-02 12:10:13 -04:00

v-card-text.vue

Various style tweaks (#449 )

2020-04-22 13:19:20 -04:00

v-card-title.vue

Type and color treatmeant (#281 )

2020-04-02 12:10:13 -04:00

v-card.story.ts

Bump prettier from 1.19.1 to 2.0.2 (#239 )

2020-03-24 10:51:30 -04:00

v-card.test.ts

[WIP] Card component (#115 )

2020-03-16 15:21:59 -04:00

v-card.vue

Base component var scoping (#480 )

2020-04-24 18:52:27 -04:00

readme.md

Card

Renders a card. A card is nothing but a v-sheet with predefined building blocks to enforce consistency.

Usage

<v-card>
	<v-card-title>Hello, world!</v-card-title>
	<v-card-subtitle>This is a card</v-card-subtitle>
	<v-card-text>Consectetur enim ullamco sint sit deserunt proident consectetur.</v-card-test>
	<v-card-actions>
		<v-button>Save</v-button>
	<v-card-actions>
</v-card>

Cards can be used to consistently style dialogs:

<v-dialog>
	<template #activator="{ on }">
		<v-button @click="on">Show dialog</v-button>
	</template>

	<v-card>
		<v-card-title>Are you sure you want to delete 1 item?</v-card-title>
		<v-card-actions>
			<v-button secondary outlined>Cancel</v-button>
			<v-button>Yes</v-button>
		</v-card-actions>
	</v-card>
</v-dialog>

Props

Prop	Description	Default
`disabled`	Disable the card, prevents all cursor interaction	`false`
`tile`	Render without rounded corners	`false`

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

Variable	Default
`--v-card-min-width`	`none`
`--v-card-max-width`	`400px`
`--v-card-min-height`	`none`
`--v-card-max-height`	`none`
`--v-card-padding`	`16px`
`--v-card-background-color`	`var(--background-subdued)`

Card Title

Functional component that enforces consistent styling.

Usage

<v-card-title>Hello, world!</v-card-title>

Props

n/a

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

n/a

Card Subtitle

Functional component that enforces consistent styling.

Usage

<v-card-subtitle>Hello from the subtitle</v-card-subtitle>

Props

n/a

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

n/a

Card Text

Functional component that enforces consistent styling.

Usage

<v-card-text>Nisi anim deserunt Lorem reprehenderit laborum.</v-card-text>

Props

n/a

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

n/a

Card Actions

Functional component that enforces consistent styling.

Usage

<v-card-actions>
	<v-button />
	<v-button />
</v-card-actions>

Props

n/a

Events

n/a

Slots

Slot	Description	Data
default

CSS Variables

n/a