0.1.0 • Published 3 years ago
p-card
Example
<p-card>
<h2 slot="heading">A card!</h2>
<p>Has any content you want</p>
<button slot="actions">As well as action buttons</button>
</p-card>
Properties
| Property | Type | Description |
|---|
collapsed | boolean | If the card is collapsible, whether or not it is collapsed |
collapsible | boolean | Whether or not the card is collapsible |
elevation | number | Card's elevation in the DOM tree |
Methods
| Method | Type | Description |
|---|
toggleCollapsed | (): void | Toggles the card's collapsed state. |
Slots
| Name | Description |
|---|
| Content Slot. |
actions | Actions Footer. Use a <menu> |
heading | Heading. Use an <hgroup> or <h1>, <h2>, etc. |
CSS Shadow Parts
| Part | Description |
|---|
actions | Actions container |
content | Content container |
heading | Heading container |
CSS Custom Properties
| Property | Default | Description |
|---|
--elevation | 1 | elevation coefficient |
--p-card-background-elevation1 | "#1111" | background for 1st elevation cards |
--p-card-background-elevation2 | "#2222" | background for 2nd elevation cards |
--p-card-border-radius | "var(--p-card-border-radius-root, 16px) / var(--elevation, 1)" | |
--p-card-border-radius-root | "16px" | border-radius |
--p-card-card-border | | border |
--p-card-divider | "var(--p-card-background-elevation1)" | color of heading divider |
--p-card-drop-shadow | "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)" | box-shadow |
--p-card-heading-background-color | "initial" | |
p-card
Example
<p-card>
<h2 slot="heading">A card!</h2>
<p>Has any content you want</p>
<button slot="actions">As well as action buttons</button>
</p-card>
Properties
| Property | Attribute | Type | Default | Description |
|---|
collapsed | collapsed | boolean | false | If the card is collapsible, whether or not it is collapsed |
collapsible | collapsible | boolean | false | Whether or not the card is collapsible |
elevation | elevation | number | | Card's elevation in the DOM tree |
onMutate | | | | |
toggleCollapsed | | | | |
Methods
| Method | Type | Description |
|---|
toggleCollapsed | (): void | Toggles the card's collapsed state. |
Slots
| Name | Description |
|---|
| Content Slot. |
actions | Actions Footer. Use a <menu> |
heading | Heading. Use an <hgroup> or <h1>, <h2>, etc. |
CSS Shadow Parts
| Part | Description |
|---|
actions | Actions container |
content | Content container |
heading | Heading container |
CSS Custom Properties
| Property | Default | Description |
|---|
--elevation | 1 | elevation coefficient |
--p-card-background-elevation1 | "#1111" | background for 1st elevation cards |
--p-card-background-elevation2 | "#2222" | background for 2nd elevation cards |
--p-card-border-radius | "var(--p-card-border-radius-root, 16px) / var(--elevation, 1)" | |
--p-card-border-radius-root | "16px" | border-radius |
--p-card-card-border | | border |
--p-card-divider | "var(--p-card-background-elevation1)" | color of heading divider |
--p-card-drop-shadow | "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)" | box-shadow |
--p-card-heading-background-color | "initial" | |