mirror of https://github.com/ElemeFE/element
Alert: Add dark theme (#15041)
Zhi Cun
hetech
parent
128feba18f
commit
686595627e
|
|
@ -30,6 +30,37 @@ Alert components are non-overlay elements in the page that does not disappear au
|
|||
```
|
||||
:::
|
||||
|
||||
### Theme
|
||||
|
||||
Alert provide two different themes, `light` and `dark`.
|
||||
|
||||
:::demo Set `effect` to change theme, default is `light`.
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Customizable close button
|
||||
|
||||
Customize the close button as texts or other symbols.
|
||||
|
|
@ -190,12 +221,13 @@ Description includes a message with more detailed information.
|
|||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| title | title | string | — | — |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| effect | Choose theme | string | light/dark | light |
|
||||
|
||||
### Slot
|
||||
|
||||
|
|
|
|||
|
|
@ -30,7 +30,38 @@ Los componentes de alertas no son elementos overlay de la página y no desaparec
|
|||
```
|
||||
:::
|
||||
|
||||
### Personalización del botón de cerrar
|
||||
### Theme
|
||||
|
||||
Alert provide two different themes, `light` and `dark`.
|
||||
|
||||
:::demo Set `effect` to change theme, default is `light`.
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Personalización del botón de cerrar
|
||||
|
||||
Personalizar el botón de cerrar como texto u otros símbolos.
|
||||
|
||||
|
|
@ -198,6 +229,7 @@ Descripción incluye un mensaje con información más detallada.
|
|||
| center | si el texto debe estar centrado | boolean | — | false |
|
||||
| close-text | texto de cerrado personalizado | string | — | — |
|
||||
| show-icon | si un icono del tipo de alerta se debe mostrar | boolean | — | false |
|
||||
| effect | Choose theme | string | light/dark | light |
|
||||
|
||||
### Slot
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
## Alerte
|
||||
## Alert
|
||||
|
||||
Affiche des messages importants.
|
||||
|
||||
|
|
@ -30,6 +30,37 @@ Les Alertes sont des composants non-superposés qui ne disparaissent pas automat
|
|||
```
|
||||
:::
|
||||
|
||||
### Theme
|
||||
|
||||
Alert provide two different themes, `light` and `dark`.
|
||||
|
||||
:::demo Set `effect` to change theme, default is `light`.
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="success alert"
|
||||
type="success"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="info alert"
|
||||
type="info"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="warning alert"
|
||||
type="warning"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="error alert"
|
||||
type="error"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
### Bouton personnalisable
|
||||
|
||||
Personnalisez le bouton de fermeture avec du texte ou des symboles.
|
||||
|
|
@ -196,6 +227,7 @@ Contient un message avec plus d'informations.
|
|||
| center | Si le texte doit être centré ou non. | boolean | — | false |
|
||||
| close-text | Texte personnalisé pour le bouton de fermeture. | string | — | — |
|
||||
| show-icon | Si une icône s'affiche ou non. | boolean | — | false |
|
||||
| effect | Choose theme | string | light/dark | light |
|
||||
|
||||
### Slot
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,39 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 主题
|
||||
|
||||
Alert 组件提供了两个不同的主题：`light`和`dark`。
|
||||
|
||||
:::demo 通过设置`effect`属性来改变主题，默认为`light`。
|
||||
```html
|
||||
<template>
|
||||
<el-alert
|
||||
title="成功提示的文案"
|
||||
type="success"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="消息提示的文案"
|
||||
type="info"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="警告提示的文案"
|
||||
type="warning"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
<el-alert
|
||||
title="错误提示的文案"
|
||||
type="error"
|
||||
effect="dark">
|
||||
</el-alert>
|
||||
</template>
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### 自定义关闭按钮
|
||||
|
||||
自定义关闭按钮为文字或其他符号。
|
||||
|
|
@ -190,6 +223,7 @@
|
|||
| center | 文字是否居中 | boolean | — | true |
|
||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||
| show-icon | 是否显示图标 | boolean | — | false |
|
||||
| effect | 选择提供的主题 | string | light/dark | light |
|
||||
|
||||
### Slot
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<transition name="el-alert-fade">
|
||||
<div
|
||||
class="el-alert"
|
||||
:class="[typeClass, center ? 'is-center' : '']"
|
||||
:class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
|
||||
v-show="visible"
|
||||
role="alert"
|
||||
>
|
||||
|
|
@ -50,7 +50,14 @@
|
|||
default: ''
|
||||
},
|
||||
showIcon: Boolean,
|
||||
center: Boolean
|
||||
center: Boolean,
|
||||
effect: {
|
||||
type: String,
|
||||
default: 'light',
|
||||
validator: function(value) {
|
||||
return ['light', 'dark'].indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -15,22 +15,51 @@
|
|||
align-items: center;
|
||||
transition: opacity .2s;
|
||||
|
||||
@include when(light) {
|
||||
.el-alert__closebtn {
|
||||
color: $--color-text-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dark) {
|
||||
.el-alert__closebtn {
|
||||
color: $--color-white;
|
||||
}
|
||||
.el-alert__description {
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(center) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--alert-success-color;
|
||||
color: $--color-success;
|
||||
|
||||
.el-alert__description {
|
||||
&.is-light {
|
||||
background-color: $--alert-success-color;
|
||||
color: $--color-success;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-success;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(info) {
|
||||
background-color: $--alert-info-color;
|
||||
color: $--color-info;
|
||||
&.is-light {
|
||||
background-color: $--alert-info-color;
|
||||
color: $--color-info;
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-info;
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-info;
|
||||
|
|
@ -38,20 +67,34 @@
|
|||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--alert-warning-color;
|
||||
color: $--color-warning;
|
||||
|
||||
.el-alert__description {
|
||||
&.is-light {
|
||||
background-color: $--alert-warning-color;
|
||||
color: $--color-warning;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-warning;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-warning;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(error) {
|
||||
background-color: $--alert-danger-color;
|
||||
color: $--color-danger;
|
||||
|
||||
.el-alert__description {
|
||||
&.is-light {
|
||||
background-color: $--alert-danger-color;
|
||||
color: $--color-danger;
|
||||
|
||||
.el-alert__description {
|
||||
color: $--color-danger;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
background-color: $--color-danger;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -84,7 +127,6 @@
|
|||
|
||||
@include e(closebtn) {
|
||||
font-size: $--alert-close-font-size;
|
||||
color: $--color-text-placeholder;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
|
|
|
|||
|
|
@ -35,6 +35,14 @@ describe('Alert', () => {
|
|||
.to.equal('Unbowed, Unbent, Unbroken');
|
||||
});
|
||||
|
||||
it('theme', () => {
|
||||
vm = createTest(Alert, {
|
||||
title: 'test',
|
||||
effect: 'dark'
|
||||
}, true);
|
||||
expect(vm.$el.classList.contains('is-dark')).to.true;
|
||||
});
|
||||
|
||||
it('title slot', () => {
|
||||
vm = createVue(`
|
||||
<el-alert>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ElementUIComponent } from './component'
|
||||
|
||||
export type AlertType = 'success' | 'warning' | 'info' | 'error'
|
||||
export type AlertEffect = 'dark' | 'light'
|
||||
|
||||
/** Alert Component */
|
||||
export declare class ElAlert extends ElementUIComponent {
|
||||
|
|
@ -24,4 +25,7 @@ export declare class ElAlert extends ElementUIComponent {
|
|||
|
||||
/** If a type icon is displayed */
|
||||
showIcon: boolean
|
||||
|
||||
/** Choose theme */
|
||||
theme: AlertEffect
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue