From a1e8c52d9f65bfd14ed0e09189a0c85114046a6c Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Wed, 6 Sep 2017 12:41:06 +0800 Subject: [PATCH] Message: add chalk theme --- examples/docs/en-US/message.md | 35 +++++- examples/docs/en-US/notification.md | 4 +- examples/docs/zh-CN/message.md | 33 ++++++ packages/message/src/main.vue | 36 +++--- packages/theme-chalk/src/common/var.scss | 5 +- .../theme-chalk/src/fonts/element-icons.ttf | Bin 8884 -> 9588 bytes .../theme-chalk/src/fonts/element-icons.woff | Bin 5256 -> 5660 bytes packages/theme-chalk/src/icon.scss | 10 +- packages/theme-chalk/src/message.scss | 109 ++++++++++-------- test/unit/specs/message.spec.js | 15 ++- 10 files changed, 167 insertions(+), 80 deletions(-) diff --git a/examples/docs/en-US/message.md b/examples/docs/en-US/message.md index 262ca213e..fd6e92054 100644 --- a/examples/docs/en-US/message.md +++ b/examples/docs/en-US/message.md @@ -64,6 +64,13 @@ }); }, + openCenter() { + this.$message({ + message: 'Centered text', + center: true + }); + }, + openHTML() { this.$message({ dangerouslyUseHTMLString: true, @@ -206,7 +213,32 @@ A close button can be added. ``` ::: -### Use HTML String +### Centered text +Use the `center` attribute to center the text + +:::demo + +```html + + + +``` +::: + +### Use HTML string `message` supports HTML string. :::demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string. @@ -259,6 +291,7 @@ You can call `Message.closeAll()` to manually close all the instances. | customClass | custom class name for Message | string | — | — | | duration | display duration, millisecond. If set to 0, it will not turn off automatically | number | — | 3000 | | showClose | whether to show a close button | boolean | — | false | +| center | whether to center the text | boolean | — | false | | onClose | callback function when closed with the message instance as the parameter | function | — | — | ### Methods diff --git a/examples/docs/en-US/notification.md b/examples/docs/en-US/notification.md index 5946767bc..25505cd69 100644 --- a/examples/docs/en-US/notification.md +++ b/examples/docs/en-US/notification.md @@ -216,7 +216,7 @@ We provide four types: success, warning, info and error. ``` ::: -### Custom Position +### Custom position Notification can emerge from any corner you like. @@ -314,7 +314,7 @@ Customize Notification's offset from the edge of the screen. ``` ::: -### Use HTML String +### Use HTML string `message` supports HTML string. ::: demo Set `dangerouslyUseHTMLString` to true and `message` will be treated as an HTML string. diff --git a/examples/docs/zh-CN/message.md b/examples/docs/zh-CN/message.md index ec86fb039..00f88cdb9 100644 --- a/examples/docs/zh-CN/message.md +++ b/examples/docs/zh-CN/message.md @@ -64,6 +64,13 @@ }); }, + openCenter() { + this.$message({ + message: '居中的文字', + center: true + }); + }, + openHTML() { this.$message({ dangerouslyUseHTMLString: true, @@ -206,6 +213,31 @@ ``` ::: +### 文字居中 +使用 `center` 属性让文字水平居中 + +:::demo + +```html + + + +``` +::: + ### 使用 HTML 片段 `message` 属性支持传入 HTML 片段 @@ -259,6 +291,7 @@ import { Message } from 'element-ui'; | customClass | 自定义类名 | string | — | — | | duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 3000 | | showClose | 是否显示关闭按钮 | boolean | — | false | +| center | 文字是否居中 | boolean | — | false | | onClose | 关闭时的回调函数, 参数为被关闭的 message 实例 | function | — | — | ### 方法 diff --git a/packages/message/src/main.vue b/packages/message/src/main.vue index 84d73972a..cabd1854c 100644 --- a/packages/message/src/main.vue +++ b/packages/message/src/main.vue @@ -1,32 +1,31 @@