Card: add shadow attribute (#10418)
* Card: add shadow attribute * Card: fix test file * Card: modify shadow class * Card: modify test file * Card: fix props
This commit is contained in:
杨奕
parent
f2068ba438
commit
87532aa8ef
|
|
@ -183,8 +183,34 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### Shadow
|
||||
|
||||
Set the conditions that appear for shadow.
|
||||
|
||||
:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
|
||||
```html
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always">
|
||||
Always
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
Hover
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
Never
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### 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 | Status of shadow | string | always/hover/never | always |
|
||||
|
|
|
|||
|
|
@ -185,8 +185,34 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### Shadow
|
||||
|
||||
Set the conditions that appear for shadow.
|
||||
|
||||
:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
|
||||
```html
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always">
|
||||
Always
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
Hover
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
Never
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Atributos
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
|
||||
| header | Titulo del card. También acepta DOM pasado por `slot#header` | string | — | — |
|
||||
| body-style | Estilo CSS del cuerpo | object | — | { padding: '20px' } |
|
||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||
| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
|
||||
| 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 |
|
||||
|
|
|
|||
|
|
@ -184,8 +184,34 @@ export default {
|
|||
```
|
||||
:::
|
||||
|
||||
### 卡片阴影
|
||||
|
||||
可对阴影的显示情况进行配置。
|
||||
|
||||
:::demo `always`、`hover`、`never`，通过设置`shadow`属性来配置卡片阴影。
|
||||
```html
|
||||
<el-row :gutter="12">
|
||||
<el-col :span="8">
|
||||
<el-card shadow="always">
|
||||
总是显示
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="hover">
|
||||
鼠标悬浮时显示
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card shadow="never">
|
||||
从不显示
|
||||
</el-col>
|
||||
</el-row>
|
||||
```
|
||||
:::
|
||||
|
||||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
|
||||
| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
|
||||
| shadow | 设置 shadow 状态| string | always/hover/never | always |
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="el-card">
|
||||
<div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
|
||||
<div class="el-card__header" v-if="$slots.header || header">
|
||||
<slot name="header">{{ header }}</slot>
|
||||
</div>
|
||||
|
|
@ -12,7 +12,12 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ElCard',
|
||||
|
||||
props: ['header', 'bodyStyle']
|
||||
props: {
|
||||
header: {},
|
||||
bodyStyle: {},
|
||||
shadow: {
|
||||
type: String
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,19 @@
|
|||
border: 1px solid $--card-border-color;
|
||||
background-color: $--color-white;
|
||||
overflow: hidden;
|
||||
box-shadow: $--box-shadow-light;
|
||||
color: $--color-text-primary;
|
||||
transition: 0.3s;
|
||||
|
||||
@include when(always-shadow) {
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
|
||||
@include when(hover-shadow) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $--box-shadow-light;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(header) {
|
||||
padding: #{$--card-padding - 2 $--card-padding};
|
||||
|
|
|
|||
|
|
@ -32,4 +32,25 @@ describe('Card', () => {
|
|||
|
||||
expect(vm.$el.querySelector('.el-card__body').style.padding).to.equal('10px');
|
||||
});
|
||||
|
||||
it('shadow', () => {
|
||||
vm = createTest(Card, {
|
||||
shadow: 'always'
|
||||
});
|
||||
expect(vm.$el.classList.contains('is-always-shadow')).to.be.true;
|
||||
});
|
||||
|
||||
it('shadow', () => {
|
||||
vm = createTest(Card, {
|
||||
shadow: 'hover'
|
||||
});
|
||||
expect(vm.$el.classList.contains('is-hover-shadow')).to.be.true;
|
||||
});
|
||||
|
||||
it('shadow', () => {
|
||||
vm = createTest(Card, {
|
||||
shadow: 'never'
|
||||
});
|
||||
expect(vm.$el.classList.contains('is-never-shadow')).to.be.true;
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue