Card: update docs for shadow attribute (#10451)

pull/10459/head
杨奕 2018-03-29 16:28:37 +08:00 committed by GitHub
parent 87532aa8ef
commit 9abb1cbe8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 10 deletions

View File

@ -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 |

View File

@ -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 |

View File

@ -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 |

3
types/card.d.ts vendored
View File

@ -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
}