UNPKG

@smui/card

Version:

Svelte Material UI - Card

hperrin/svelte-material-ui

92 lines (53 loc) • 2.94 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
# Svelte Material UI - Cards A container for media and actions. # Installation ```sh npm install --save-dev @smui/card ``` # Examples and Usage Information https://sveltematerialui.com/demo/card # Exports ## (default) A card. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `variant`: `'raised'` - The card's style variant. ('raised' or 'outlined') - `padded`: `false` - Whether to apply padding to the card. You can also use a `Content` component to achieve the same effect. ## Content A fragment used as a content area within a card. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). Note that you can supply your own component to a `ClassAdder` based component. You can use this to create things like list cards. ## PrimaryAction An interactive portion of the card. Meant to be the primary way to interact with the card. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `ripple`: `true` - Whether to implement a ripple for when the component is interacted with. - `color`: `undefined` - A color, passed to the Ripple action. ('primary', or 'secondary') - `padded`: `false` - Whether to apply padding to the area. - `tabindex`: `0` - The tabindex of the area. ## Media An area of the card meant to show media content. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `aspectRatio`: `undefined` - Add styling to maintain a given aspect ratio. ('square' or '16x9') ## MediaContent An area of the card within the media meant to show content over top of the media. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). ## Actions An area of the card containing interactive actions. ### Options / Defaults - `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options. - `class`: `''` - A CSS class string. - `fullBleed`: `false` - Whether to style the actions as full bleed, meaning they take up the whole width of the card. ## ActionButtons An area of the card, within Actions, containing buttons. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). ## ActionIcons An area of the card, within Actions, containing icon buttons. Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte). # More Information See [Cards](https://material.io/components/cards) in the Material design spec. See [Card](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-card) in MDC-Web for information about the upstream library's architecture.