mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 09:20:51 +08:00
52 lines
1.4 KiB
Markdown
52 lines
1.4 KiB
Markdown
|
# Card
|
||
|
|
|
||
|
|
Integrate information in a card container.
|
||
|
|
|
||
|
|
## Basic usage
|
||
|
|
|
||
|
|
Card includes title, content and operations.
|
||
|
|
|
||
|
|
:::demo Card is made up of `header` and `body`. `header` is optional, and its content distribution depends on a named slot.
|
||
|
|
|
||
|
|
card/basic
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Simple card
|
||
|
|
|
||
|
|
The header part can be omitted.
|
||
|
|
|
||
|
|
:::demo
|
||
|
|
|
||
|
|
card/simple
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## With images
|
||
|
|
|
||
|
|
Display richer content by adding some configs.
|
||
|
|
|
||
|
|
:::demo The `body-style` attribute defines CSS style of custom `body`. This example also uses `el-col` for layout.
|
||
|
|
|
||
|
|
card/with-images
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Shadow
|
||
|
|
|
||
|
|
You can define when to show the card shadows
|
||
|
|
|
||
|
|
:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.
|
||
|
|
|
||
|
|
card/shadow
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## Attributes
|
||
|
|
|
||
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
||
|
|
| ---------- | ------------------------------------------------------------- | ------ | ---------------------- | ------------------- |
|
||
|
|
| header | title of the card. Also accepts a DOM passed by `slot#header` | string | — | — |
|
||
|
|
| body-style | CSS style of body | object | — | { padding: '20px' } |
|
||
|
|
| shadow | when to show card shadows | string | always / hover / never | always |
|