Commit 9abb1cbe authored by 杨奕's avatar 杨奕 Committed by GitHub

Card: update docs for shadow attribute (#10451)

parent 87532aa8
......@@ -185,9 +185,9 @@ export default {
### Shadow
Set the conditions that appear for shadow.
You can define when to show the card shadows
:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.
```html
<el-row :gutter="12">
<el-col :span="8">
......@@ -203,6 +203,7 @@ Set the conditions that appear for shadow.
<el-col :span="8">
<el-card shadow="never">
Never
</el-card>
</el-col>
</el-row>
```
......@@ -211,6 +212,6 @@ Set the conditions that appear for shadow.
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
| header | title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
| body-style | CSS style of body | object| — | { padding: '20px' } |
| shadow | Status of shadow | string | always/hover/never | always |
| shadow | when to show card shadows | string | always / hover / never | always |
......@@ -187,9 +187,9 @@ export default {
### Shadow
Set the conditions that appear for shadow.
You can define when to show the card shadows
:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
:::demo The `shadow` attribute determines when the card shadows are displayed. It can be `always`, `hover` or `never`.
```html
<el-row :gutter="12">
<el-col :span="8">
......@@ -205,6 +205,7 @@ Set the conditions that appear for shadow.
<el-col :span="8">
<el-card shadow="never">
Never
</el-card>
</el-col>
</el-row>
```
......@@ -215,4 +216,4 @@ Set the conditions that appear for shadow.
| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
| header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — |
| body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } |
| shadow | Status of shadow | string | always/hover/never | always |
| shadow | when to show card shadows | string | always / hover / never | always |
......@@ -186,9 +186,9 @@ export default {
### 卡片阴影
可对阴影的显示情况进行配置。
可对阴影的显示进行配置。
:::demo `always``hover``never`,通过设置`shadow`属性来配置卡片阴影
:::demo 通过`shadow`属性设置卡片阴影出现的时机:`always``hover``never`
```html
<el-row :gutter="12">
<el-col :span="8">
......@@ -204,6 +204,7 @@ export default {
<el-col :span="8">
<el-card shadow="never">
从不显示
</el-card>
</el-col>
</el-row>
```
......@@ -214,4 +215,4 @@ export default {
|---------- |-------- |---------- |------------- |-------- |
| header | 设置 header,也可以通过 `slot#header` 传入 DOM | string| — | — |
| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
| shadow | 设置 shadow 状态| string | always/hover/never | always |
| shadow | 设置阴影显示时机 | string | always / hover / never | always |
......@@ -19,5 +19,8 @@ export declare class ElCard extends ElementUIComponent {
/** CSS style of body */
bodyStyle: object
/** When to show card shadows */
shadow: string
$slots: CardSlots
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment