mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
c3f529c411
* docs(components): [card] * Update card docs with new syntax * docs(components): [card] * Update docs with new syntax * Reorganize code for readabiltiies. * chore: address PR comments Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
1.6 KiB
1.6 KiB
title, lang
| title | lang |
|---|---|
| Card | en-US |
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
:::
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| header | title of the card. Also accepts a DOM passed by slot#header |
^[string] | — |
| body-style | CSS style of card body | ^[object]CSSProperties |
{ padding: '20px' } |
| shadow | when to show card shadows | ^[enum]always | never | hover |
always |
Slots
| Name | Description |
|---|---|
| default | customize default content |
| header | content of the Card header |