From 5a05c3800347c61e022da725381b6446f5ad6c38 Mon Sep 17 00:00:00 2001 From: huangchunyan Date: Fri, 13 Dec 2019 18:33:14 +0800 Subject: [PATCH] minor,fix button ui --- examples/docs/zh-CN/button.md | 637 ++++++++++++++----- examples/docs/zh-CN/dialog.md | 26 +- examples/docs/zh-CN/table.md | 31 +- examples/docs/zh-CN/tabs.md | 8 + examples/docs/zh-CN/tag.md | 142 ++--- examples/docs/zh-CN/upload.md | 10 +- packages/button/src/button-group.vue | 11 +- packages/message-box/src/main.vue | 4 +- packages/theme-chalk/src/button.scss | 227 +++++-- packages/theme-chalk/src/common/var.scss | 4 +- packages/theme-chalk/src/input-number.scss | 3 +- packages/theme-chalk/src/mixins/_button.scss | 46 +- packages/theme-chalk/src/tabs.scss | 2 +- packages/theme-chalk/src/upload.scss | 9 +- 14 files changed, 832 insertions(+), 328 deletions(-) diff --git a/examples/docs/zh-CN/button.md b/examples/docs/zh-CN/button.md index 3c607ea22b3..726022922c7 100644 --- a/examples/docs/zh-CN/button.md +++ b/examples/docs/zh-CN/button.md @@ -43,153 +43,540 @@ * ##### 请注意把页面原来用mini的换成small。 * ##### 默认尺寸不需要额外加medium了。 ::: -常用的操作按钮。 - ### 规范要求按钮用法 +主要分三种层次的按钮，主要按钮(primary)、次要按钮(default)、次次要按钮(plain)。 +dialog、messagebox 上的取消按钮用的是 次次要按钮 ，确认或者提交按钮用的是 次要按钮 + +:::demo +```html
主要按钮 次要按钮 次次要按钮
+``` +::: +### 禁用状态 -### 基础用法 - -基础的按钮用法。 - -:::demo 使用`type`、`plain`和`round`属性来定义 Button 的样式。 +各种规范类型的按钮的 disable 状态 +:::demo ```html +
+ 主要按钮 + 次要按钮 + 次次要按钮 +
+``` +::: +### 按钮尺寸用法，默认 medium +主要两种尺寸 medium 和 small，默认是 medium，另外big 和 mini 两种尺寸留作备用 +:::demo +```html
- 默认按钮 + medium: 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 + 次要按钮 + 次次要按钮
- 朴素按钮 - 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 + small: + 主要按钮 + 次要按钮 + 次次要按钮
-
- 圆形按钮 - 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 - - - - - +
+

big 和 mini 两种尺寸留作备用

+ +
+ big: + 主要按钮 + 次要按钮 + 次次要按钮 +
+ +
+ mini: + 主要按钮 + 次要按钮 + 次次要按钮
``` ::: -公司实际项目中用的比较多的几种按钮 -
-默认按钮 -主要按钮 -朴素按钮 -主要按钮 -圆形按钮 -主要按钮 -
+### 文字按钮 -
-
- 危险按钮 - 危险按钮 - 危险按钮 -
+没有边框和背景色的按钮，你可以使用`text`属性来定义按钮是否是文本样式，它接受一个`Boolean`值。如果是文字类链接，不用 el-button 这个组件 -### 禁用状态 +:::demo +```html +
+ Kyligence + Kyligence +
+``` +::: -按钮不可用状态。 +### 纯图标按钮 -:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。 +图标按钮 hover 需要加上 tooltips 来表示这按钮是用来干嘛的，尺寸一般用 small 类型，表中表时，需要用 mini 尺寸 +:::demo ```html
- 默认按钮 - 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 + + + + + + + + +
-
- 朴素按钮 - 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 +
+ + + + + + + + + +
+ +
+ 正常状态: + + + +
+ +
+ disable 状态: + + +
``` ::: -### 文字按钮 +### 文字 + icon -没有边框和背景色的按钮。 +各种规范类型的按钮 前缀加 icon 的情况 -:::demo 你可以使用`text`属性来定义按钮是否是文本样式，它接受一个`Boolean`值。 +:::demo ```html -
- 主要按钮 - 成功按钮 - 信息按钮 - 警告按钮 - 危险按钮 - 禁用按钮 +
+ 主要按钮 + 次要按钮 + 次次要按钮 +
+ +
+ 主要按钮 + 次要按钮 + 次次要按钮
``` ::: -### 图标按钮 - -带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。 - -:::demo 设置`icon`属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用`i`标签即可，可以使用自定义图标。 +### 警告状态 +警告状态：适用于危险操作（不希望用户操作此按钮，会带来重大影响的情形下）。提交失败的情况，不适用此按钮，只能使用次要按钮形式，避免过度强调。 +:::demo ```html - - - -搜索 -上传 +
+ 高高危操作 + 高危操作 + 删除 +
``` ::: + ### 按钮组 -以按钮组的方式出现，常用于多项类似操作。 +以按钮组的方式出现，常用于多项类似操作，常用的是蓝底白字和白底蓝字款 :::demo 使用``标签来嵌套你的按钮。 ```html +

水平组织

+

主要按钮(左：正常，右：带 disabled)

- - 上一页 - 下一页 - - - - - - + + 编辑 + 分享 + 删除 + + +

全部 disabled

+ + + 编辑 + 分享 + 删除 + + +

不同位置 disabled

+ + + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + +

有多个 disabled

+ + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + +
+ +
+

纯 icon 版

+ + + + + + + + + + + +
+ +

次要按钮(左：正常，右：带 disabled)

+
+ + 编辑 + 分享 + 删除 + + +

全部 disabled

+ + + 编辑 + 分享 + 删除 + + +

不同位置 disabled

+ + 编辑 + 分享 + 删除 + + + 编辑 + 分享 + 删除 + + + 编辑 + 分享 + 删除 + + +

有多个 disabled

+ + 编辑 + 分享 + 删除 + + + 编辑 + 分享 + 删除 + + + 编辑 + 分享 + 删除 + +
+ +
+

纯 icon 版

+ + + + + + + + + + + +
+ +

次次要按钮(左：正常，右：带 disabled)

+
+ + 编辑 + 分享 + 删除 + + +

全部 disabled

+ + + 编辑 + 分享 + 删除 + + +

不同位置 disabled

+ + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + +

有多个 disabled

+ + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + + + + 编辑 + 分享 + 删除 + +
+ +
+

纯 icon 版

+ + + + + + + + + + + +
+ +
+ +

垂直组织

+ +

主要按钮(左：正常，右：带 disabled)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

次要按钮(左：正常，右：带 disabled)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

次次要按钮(左：正常，右：带 disabled)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` ::: @@ -224,30 +611,14 @@ locales: { } } ``` -:::demo 支持的尺寸：`big`、 `medium`、`small`、`mini`，通过设置`size`属性来配置它们，默认是medium的尺寸。 +:::demo 支持的尺寸：`big`、 `medium`、`small`、`mini`，通过设置`size`属性来配置它们，默认是medium的尺寸，但现在项目中用的都是small 尺寸的这个 ```html
- EN - 中文 - - - EN - 中文 - - - EN - 中文 - - - EN - 中文 - - - EN - 中文 - + EN + 中文 +
-``` -::: - -### 动态编辑标签 - -动态编辑标签可以通过点击标签关闭按钮后触发的 `close` 事件来实现 - -:::demo -```html - - {{tag}} - - - -+ New Tag - - - + ``` ::: ### 不同尺寸 -Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。 +规范中建议使用两种尺寸，small 和 mini。 -:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。 +:::demo mini 尺寸主要适用于 1. 小型 input 框（h = 24px）里的多选情况，2. 表中表的编辑状态下 ```html -默认标签 -中等标签 +

常用尺寸：

小型标签 + +

表中表的编辑状态时适用的尺寸：

超小标签 + +

留作备用的两个尺寸：default medium

+
+ 默认标签 + 中等标签 +
+ ``` ::: diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md index 54bd67915a2..505366b0bd9 100644 --- a/examples/docs/zh-CN/upload.md +++ b/examples/docs/zh-CN/upload.md @@ -13,13 +13,16 @@ .avatar-uploader { .el-upload { border: 1px dashed #d9d9d9; - border-radius: 6px; + border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; &:hover, &:focus { border-color: #409EFF; + i { + color: #409EFF; + } } } .avatar-uploader-icon { @@ -189,13 +192,16 @@