Merge pull request #11 from csvwolf/master

Fix docs according to UED

Merge pull request #11 from csvwolf/master
Fix docs according to UED
9b9f09ba · 杨奕 · GitHub · bb1ea77a · 604ee200 · 9b9f09ba
Commit 9b9f09ba authored Sep 06, 2016 by 杨奕 Committed by GitHub Sep 06, 2016
8 changed files
--- a/examples/docs/badge.md
+++ b/examples/docs/badge.md
@@ -2,7 +2,7 @@
 出现在按钮、图标旁的数字或状态标记

 ### 基础用法
-Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。
+展示新消息数量。

 :::demo 定义`value`属性，它接受`Number`或者`String`。

@@ -28,7 +28,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 :::

 ### 最大值
-为了方便使用，Badge 组件可以自定义显示的最大值。
+可自定义最大值。

 :::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。

@@ -43,8 +43,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 :::

 ### 自定义内容
-
-下面是两个样例，它们可以启发你在适时的情况使用 Badge：
+可以显示数字以外的文本内容。

 :::demo 定义`value`为`String`类型是时可以用于显示自定义文本。

@@ -59,8 +58,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
 :::

 ### 小红点
-
-可以使 Badge 组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
+以红点的形式标注需要关注的内容。

 :::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。


--- a/examples/docs/breadcrumb.md
+++ b/examples/docs/breadcrumb.md
 ## Breadcrumb 面包屑
 显示当前页面的路径，快速返回之前的任意页面

-### 基础使用
+### 基础用法

 适用广泛的基础用法。

 :::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。

 ```html
-<el-breadcrumb separator="//">
+<el-breadcrumb separator="/">
  <el-breadcrumb-item>Home</el-breadcrumb-item>
  <el-breadcrumb-item>Page 1</el-breadcrumb-item>
  <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>

--- a/examples/docs/card.md
+++ b/examples/docs/card.md
@@ -78,7 +78,7 @@
 ```
 :::

-### 进阶使用
+### 带图片

 可配置定义更丰富的内容展示。


--- a/examples/docs/dropdown.md
+++ b/examples/docs/dropdown.md
@@ -42,75 +42,42 @@
 ```
 :::

-### 不带独立按钮的下拉菜单
+### 触发对象
+
+可使用按钮触发下拉菜单。

 :::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。

 ```html
-<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
+<el-dropdown text="更多菜单" type="primary" :icon-separate="false">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
  <el-dropdown-item class="divider">选项四</el-dropdown-item>
 </el-dropdown>
-```
-:::

-### 通过点击触发下拉
-
-:::demo 在`trigger`属性设置为`click`即可。
-```html
-<el-dropdown text="主要按钮" type="primary" trigger="click">
+<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
  <el-dropdown-item>选项四</el-dropdown-item>
 </el-dropdown>
-<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
-</el-dropdown>
 ```
 :::

-### 按钮样式
+### 触发方式

-除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
-
-:::demo
-```html
-<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <li class="divider">选项四</el-dropdown-item>
-</el-dropdown>
-```
-:::
+可以配置 click 激活或者 hover 激活。

-:::demo
+:::demo 在`trigger`属性设置为`click`即可。
 ```html
-<el-dropdown text="下拉菜单" type="primary" size="large">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <li class="divider">选项四</el-dropdown-item>
-</el-dropdown>
-<el-dropdown text="下拉菜单" type="primary">
+<el-dropdown text="主要按钮" type="primary" trigger="hover">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
-</el-dropdown>
-<el-dropdown text="下拉菜单" type="primary" size="small">
-  <el-dropdown-item>选项一</el-dropdown-item>
-  <el-dropdown-item>选项二</el-dropdown-item>
-  <el-dropdown-item>选项三</el-dropdown-item>
-  <el-dropdown-item class="divider">选项四</el-dropdown-item>
+  <el-dropdown-item>选项四</el-dropdown-item>
 </el-dropdown>
-<el-dropdown text="下拉菜单" type="primary" size="mini">
+<el-dropdown text="下拉菜单" type="primary" :icon-separate="false" trigger="click">
  <el-dropdown-item>选项一</el-dropdown-item>
  <el-dropdown-item>选项二</el-dropdown-item>
  <el-dropdown-item>选项三</el-dropdown-item>

--- a/examples/docs/pagination.md
+++ b/examples/docs/pagination.md
@@ -27,21 +27,77 @@
 ```
 :::

+### 复杂分页
+
+能够承载复杂交互的分页。
+
+:::demo `total`只要足够大，就会产生复杂分页的样式。
+```html
+<el-pagination
+  layout="prev, pager, next"
+  :total="1000">
+</el-pagination>
+```
+:::
+
 ### 附加功能

-:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示100个，200个，300个或者400个。
+:::demo 此例是一个完整的用例，使用了`sizechange`和`currentchange`事件来处理页码大小和当前页变动时候触发的事件。`page-sizes`接受一个整型数组，数组元素为展示的选择每页显示个数的选项，`[100, 200, 300, 400]`表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。

 ```html
 <template>
-  <el-pagination
-    @sizechange="handleSizeChange"
-    @currentchange="handleCurrentChange"
-    :current-page="5"
-    :page-sizes="[100, 200, 300, 400]"
-    :page-size="100"
-    layout="sizes, prev, pager, next, jumper, total"
-    :total="1000">
-  </el-pagination>
+  <el-row>
+    <el-col :span="24">
+      <el-pagination
+        @sizechange="handleSizeChange"
+        @currentchange="handleCurrentChange"
+        :current-page="5"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="24">
+      <el-pagination
+        @sizechange="handleSizeChange"
+        @currentchange="handleCurrentChange"
+        :current-page="5"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="sizes, prev, pager, next"
+        :total="1000">
+      </el-pagination>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="24">
+      <el-pagination
+        @sizechange="handleSizeChange"
+        @currentchange="handleCurrentChange"
+        :current-page="5"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="prev, pager, next, jumper"
+        :total="1000">
+      </el-pagination>
+    </el-col>
+  </el-row>
+  <el-row>
+    <el-col :span="24">
+      <el-pagination
+        @sizechange="handleSizeChange"
+        @currentchange="handleCurrentChange"
+        :current-page="5"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="1000">
+      </el-pagination>
+    </el-col>
+  </el-row>
 </template>
 <script>
  export default {
@@ -58,18 +114,12 @@
 ```
 :::

-<script>
-  export default {
-    methods: {
-      handleSizeChange(val) {
-        console.log(`每页 ${val} 条`);
-      },
-      handleCurrentChange(val) {
-        console.log(`当前页: ${val}`);
-      }
-    }
+<style>
+  .el-col {
+    margin-bottom: 10px;
  }
-</script>
+</style>
+

 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |

--- a/examples/docs/radio.md
+++ b/examples/docs/radio.md
@@ -44,7 +44,31 @@
 ```
 :::

-### Radio Group
+### 禁用状态
+
+单选框不可用的状态。
+
+:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
+```html
+<template>
+  <el-radio disabled v-model="radio" label="禁用"></el-radio>
+  <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        radio: '',
+        radio1: '选中且禁用'
+      };
+    }
+  }
+</script>
+```
+:::
+
+### 单选框组

 :::demo 结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。

@@ -57,9 +81,9 @@
 ```
 :::

-### Radio Group Button
+### 按钮样式

-一种特殊的单选按钮组。
+按钮样式的单选组合。

 :::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
 ```html
@@ -84,32 +108,6 @@
 ```
 :::

-### 禁用
-
-单选框不可用的状态。
-
-注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
-
-:::demo 只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
-```html
-<template>
-  <el-radio disabled v-model="radio" label="禁用"></el-radio>
-  <el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        radio: '',
-        radio1: '选中且禁用'
-      };
-    }
-  }
-</script>
-```
-:::
-
 ### Radio Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |

--- a/examples/docs/tabs.md
+++ b/examples/docs/tabs.md
@@ -37,17 +37,19 @@
 ## Tabs 标签页
 分隔内容上有关联但属于不同类别的数据集合

-### 基础使用
+### 基础用法
+
+基础的、简洁的标签页。

 :::demo Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。例子选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。

 ```html
 <template>
  <el-tabs :active-name="activeName">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane name="two" label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="选项卡四"></el-tab-pane>
  </el-tabs>
 </template>
 <script>
@@ -62,39 +64,49 @@
 ```
 :::

-### 多种风格
+### 选项卡样式

-除了上例中的风格外，我们还提供了标签和卡片两种风格。
+选项卡样式的标签页。

-:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
-```html
-<el-tabs type="card">
-  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-</el-tabs>
+:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`。

-<el-tabs type="border-card">
-  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
-</el-tabs>
+```html
+<template>
+  <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
+    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="选项卡四"></el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  export default {
+    methods: {
+      handleRemove(tab) {
+        console.log(tab);
+      },
+      handleClick(tab) {
+        console.log(tab);
+      }
+    }
+  };
+</script>
 ```
 :::

-### 可关闭的标签
+### 可关闭
+
+可以关闭标签页

 :::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。

 ```html
 <template>
  <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
-    <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
-    <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
-    <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
-    <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
+    <el-tab-pane label="选项卡一"></el-tab-pane>
+    <el-tab-pane label="选项卡二"></el-tab-pane>
+    <el-tab-pane label="选项卡三"></el-tab-pane>
+    <el-tab-pane label="选项卡四"></el-tab-pane>
  </el-tabs>
 </template>
 <script>
@@ -112,6 +124,21 @@
 ```
 :::

+### 卡片化
+
+卡片化的标签页。
+
+:::demo 将`type`设置为`border-card`。
+```html
+<el-tabs type="border-card">
+  <el-tab-pane label="选项卡一"></el-tab-pane>
+  <el-tab-pane label="选项卡二"></el-tab-pane>
+  <el-tab-pane label="选项卡三"></el-tab-pane>
+  <el-tab-pane label="选项卡四"></el-tab-pane>
+</el-tabs>
+```
+:::
+
 ### Tabs Attributes
 | 参数       | 说明     | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |

--- a/examples/docs/tag.md
+++ b/examples/docs/tag.md
@@ -33,8 +33,6 @@

 ### 基础使用

-Tag 组件提供了六种主题。
-
 :::demo 由`type`属性来定义，该属性可选填。

 ```html
@@ -47,16 +45,6 @@ Tag 组件提供了六种主题。
 ```
 :::

-### 描边
-
-借此可以定义 hover 时的效果。
-
-:::demo `hit`属性可以设置描边。
-```html
-<el-tag type="primary" :hit="true">标签</el-tag>
-```
-:::
-
 ### 可移除的标签

 :::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。