mirror of https://github.com/ElemeFE/element
Alert: add chalk theme
Leopoldthecoder
杨奕
parent
a1e8c52d9f
commit
a6016a5cc4
|
|
@ -118,6 +118,42 @@ Displaying an icon improves readability.
|
|||
```
|
||||
:::
|
||||
|
||||
## Centered text
|
||||
|
||||
Use the `center` attribute to center the text.
|
||||
|
||||
::: demo
|
||||
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### With description
|
||||
|
||||
Description includes a message with more detailed information.
|
||||
|
|
@ -176,6 +212,7 @@ Description includes a message with more detailed information.
|
|||
| type | component type | string | success/warning/info/error | info |
|
||||
| description | descriptive text. Can also be passed with the default slot | string | — | — |
|
||||
| closable | if closable or not | boolean | — | true |
|
||||
| center | whether to center the text | boolean | — | false |
|
||||
| close-text | customized close button text | string | — | — |
|
||||
| show-icon | if a type icon is displayed | boolean | — | false |
|
||||
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@ A close button can be added.
|
|||
:::
|
||||
|
||||
### Centered text
|
||||
Use the `center` attribute to center the text
|
||||
Use the `center` attribute to center the text.
|
||||
|
||||
:::demo
|
||||
|
||||
|
|
|
|||
|
|
@ -115,6 +115,41 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 文字居中
|
||||
|
||||
使用 `center` 属性让文字水平居中。
|
||||
|
||||
::: demo
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
center
|
||||
show-icon>
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### 带有辅助性文字介绍
|
||||
|
||||
包含标题和内容，解释更详细的警告。
|
||||
|
|
@ -171,6 +206,7 @@
|
|||
| type | 主题 | string | success/warning/info/error | info |
|
||||
| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
|
||||
| closable | 是否可关闭 | boolean | — | true |
|
||||
| center | 文字是否居中 | boolean | — | true |
|
||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||
| show-icon | 是否显示图标 | boolean | — | false |
|
||||
|
||||
|
|
|
|||
|
|
@ -214,7 +214,7 @@
|
|||
:::
|
||||
|
||||
### 文字居中
|
||||
使用 `center` 属性让文字水平居中
|
||||
使用 `center` 属性让文字水平居中。
|
||||
|
||||
:::demo
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<transition name="el-alert-fade">
|
||||
<div
|
||||
class="el-alert"
|
||||
:class="[ typeClass ]"
|
||||
:class="[typeClass, center ? 'is-center' : '']"
|
||||
v-show="visible"
|
||||
role="alert"
|
||||
>
|
||||
|
|
@ -20,9 +20,9 @@
|
|||
|
||||
<script type="text/babel">
|
||||
const TYPE_CLASSES_MAP = {
|
||||
'success': 'el-icon-circle-check',
|
||||
'success': 'el-icon-success',
|
||||
'warning': 'el-icon-warning',
|
||||
'error': 'el-icon-circle-cross'
|
||||
'error': 'el-icon-error'
|
||||
};
|
||||
export default {
|
||||
name: 'ElAlert',
|
||||
|
|
@ -49,10 +49,8 @@
|
|||
type: String,
|
||||
default: ''
|
||||
},
|
||||
showIcon: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
showIcon: Boolean,
|
||||
center: Boolean
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -74,7 +72,7 @@
|
|||
},
|
||||
|
||||
iconClass() {
|
||||
return TYPE_CLASSES_MAP[this.type] || 'el-icon-information';
|
||||
return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
|
||||
},
|
||||
|
||||
isBigIcon() {
|
||||
|
|
|
|||
|
|
@ -10,25 +10,49 @@
|
|||
position: relative;
|
||||
background-color: $--color-white;
|
||||
overflow: hidden;
|
||||
color: $--color-white;
|
||||
opacity: 1;
|
||||
display: table;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s;
|
||||
|
||||
@include when(center) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--alert-success-color;
|
||||
color: $--color-success;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-success;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
background-color: $--alert-info-color;
|
||||
color: $--color-info;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-info;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--alert-warning-color;
|
||||
color: $--color-warning;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-warning;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
background-color: $--alert-danger-color;
|
||||
color: $--color-danger;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(content) {
|
||||
|
|
@ -39,9 +63,6 @@
|
|||
@include e(icon) {
|
||||
font-size: $--alert-icon-size;
|
||||
width: $--alert-icon-size;
|
||||
display: table-cell;
|
||||
color: $--color-white;
|
||||
vertical-align: middle;
|
||||
@include when(big) {
|
||||
font-size: $--alert-icon-large-size;
|
||||
width: $--alert-icon-large-size;
|
||||
|
|
@ -57,14 +78,13 @@
|
|||
}
|
||||
|
||||
& .el-alert__description {
|
||||
color: $--color-white;
|
||||
font-size: $--alert-description-font-size;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
@include e(closebtn) {
|
||||
font-size: $--alert-close-font-size;
|
||||
color: $--color-white;
|
||||
color: $--color-text-placeholder;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -234,10 +234,10 @@ $--alert-description-font-size: 12px;
|
|||
$--alert-close-font-size: 12px;
|
||||
$--alert-close-customed-font-size: 13px;
|
||||
|
||||
$--alert-success-color: $--color-success;
|
||||
$--alert-info-color: $--color-info;
|
||||
$--alert-warning-color: $--color-warning;
|
||||
$--alert-danger-color: $--color-danger;
|
||||
$--alert-success-color: $--color-success-lighter;
|
||||
$--alert-info-color: $--color-info-lighter;
|
||||
$--alert-warning-color: $--color-warning-lighter;
|
||||
$--alert-danger-color: $--color-danger-lighter;
|
||||
|
||||
$--alert-icon-size: 16px;
|
||||
$--alert-icon-large-size: 28px;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
left: 50%;
|
||||
top: 20px;
|
||||
transform: translateX(-50%);
|
||||
background-color: $--border-color-extra-light;
|
||||
background-color: $--color-info-lighter;
|
||||
transition: opacity 0.3s, transform .4s;
|
||||
overflow: hidden;
|
||||
padding: $--message-padding;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ describe('Alert', () => {
|
|||
showIcon: true
|
||||
}, true);
|
||||
expect(vm.$el.classList.contains('el-alert--success')).to.true;
|
||||
expect(vm.$el.querySelector('.el-icon-circle-check')).to.exist;
|
||||
});
|
||||
|
||||
it('description', () => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue