2021-10-22 19:32:39 +08:00
|
|
|
---
|
2021-10-25 15:21:08 +08:00
|
|
|
title: Card
|
2021-10-22 19:32:39 +08:00
|
|
|
lang: en-US
|
|
|
|
|
---
|
|
|
|
|
|
2021-09-17 00:18:50 +08:00
|
|
|
# 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
|
|
|
|
|
|
2022-09-10 09:14:31 +08:00
|
|
|
| Name | Description | Type | Accepted Values | Default |
|
2022-01-07 16:09:32 +08:00
|
|
|
| ---------- | ------------------------------------------------------------- | ------ | ---------------------- | --------------------- |
|
|
|
|
|
| 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 |
|
2021-10-04 08:26:51 +08:00
|
|
|
|
|
|
|
|
## Slots
|
|
|
|
|
|
2022-08-20 09:14:12 +08:00
|
|
|
| Name | Description |
|
|
|
|
|
| ------ | -------------------------- |
|
|
|
|
|
| — | customize default content |
|
|
|
|
|
| header | content of the Card header |
|
