fix docs of breadcrumb/button/card/checkbox

1b10862c · SkyAo · f6dd3cf7 · 1b10862c · 1b10862c · 1b10862c
Commit 1b10862c authored Sep 02, 2016 by SkyAo
4 changed files
--- a/examples/docs/breadcrumb.md
+++ b/examples/docs/breadcrumb.md
@@ -3,7 +3,7 @@

 ### 基础使用

-Breadcrumb，面包屑导航，用于提供给用户一个回溯到首页的路径，最后一级即为当前位置。
+适用广泛的基础用法。

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


--- a/examples/docs/button.md
+++ b/examples/docs/button.md
@@ -16,6 +16,9 @@
 </script>
 <style>
  .demo-box.demo-button {
+    .el-row {
+      margin-bottom: 10px;
+    }
    .el-button + .el-button {
      margin-left: 10px;
    }
@@ -34,65 +37,53 @@

 ### 基础用法

-:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。
-
-```html
-<el-button>Default</el-button>
-<el-button type="primary">primary</el-button>
-<el-button type="success">success</el-button>
-<el-button type="warning">warning</el-button>
-<el-button type="danger">danger</el-button>
-<el-button type="info">info</el-button>
-<el-button type="text">text button</el-button>
-```
-:::
-
-:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。
-
-```html
-<el-button :disabled="true">disabled</el-button>
-```
-:::
-
-### Plain Button
-默认的`Default`主题，我们称之为朴素按钮(Plain Button)，你可以 hover 在样例上进行预览。
+基础的按钮用法。

-:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。
+:::demo Button 组件默认提供7种主题，由`type`属性来定义，默认为`default`。

 ```html
-<el-button :plain="true">Default</el-button>
-<el-button :plain="true" type="success">success</el-button>
-<el-button :plain="true" type="warning">warning</el-button>
-<el-button :plain="true" type="danger">danger</el-button>
-<el-button :plain="true" :disabled="true">disabled</el-button>
+<el-button>默认按钮</el-button>
+<el-button type="primary">主要按钮</el-button>
+<el-button type="text">文字按钮</el-button>
 ```
 :::

-### 尺寸
+### 禁用状态

-Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+按钮不可用状态。

-:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
+:::demo 你可以使用`disabled`属性来定义按钮是否可用，它接受一个`Boolean`值。

 ```html
-<el-button type="primary" size="large">large</el-button>
-<el-button type="primary">Default</el-button>
-<el-button type="primary" size="small">small</el-button>
-<el-button type="primary" size="mini">mini</el-button>
+<el-button :plain="true" :disabled="true">主要按钮</el-button>
+<el-button type="primary" :disabled="true">主要按钮</el-button>
+<el-button type="text" :disabled="true">文字按钮</el-button>
 ```
 :::

-### Loading
+### 有颜色倾向

-可以方便的处理 loading 状态，点击下面的按钮预览效果。
+不同的颜色倾向代表不同的提示

-:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
+:::demo 朴素按钮同样设置了不同的`type`属性对应的样式（可选值同上），默认为`info`。设置`plain`属性，它接受一个`Boolean`。注意，在该情况下，`type`虽然可以为`text`，但是是没有意义的，会显示为`text button`的样式。

 ```html
-<el-button type="primary" :loading="true">Button</el-button>
-
-<el-button type="primary" :loading="isLoading" @click.native="isLoading = true">Button</el-button>
-<el-button type="primary" icon="search" :loading="isLoading2" @click.native="isLoading2 = true">Button</el-button>
+<el-row>
+  <el-col :span="24">
+    <el-button type="success">成功按钮</el-button>
+    <el-button type="warning">警告按钮</el-button>
+    <el-button type="danger">危险按钮</el-button>
+    <el-button type="info">信息按钮</el-button>
+  </el-col>
+</el-row>
+<el-row>
+  <el-col :span="24">
+    <el-button :plain="true" type="success">成功按钮</el-button>
+    <el-button :plain="true" type="warning">警告按钮</el-button>
+    <el-button :plain="true" type="danger">危险按钮</el-button>
+    <el-button :plain="true" type="info">信息按钮</el-button>
+  </el-col>
+</el-row>
 ```
 :::

@@ -104,6 +95,8 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景

 ```html
 <el-button type="primary" icon="edit"></el-button>
+<el-button type="primary" icon="share"></el-button>
+<el-button type="primary" icon="delete"></el-button>
 <el-button type="primary" icon="search">Search</el-button>
 <el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>
 ```
@@ -111,15 +104,14 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景

 ### 按钮组

-如果你需要多个并列的按钮，按钮组可以帮你轻松的实现它。
+以按钮组的方式出现，常用于多项类似操作。

 :::demo 使用`<el-button-group>`标签来嵌套你的按钮。

 ```html
 <el-button-group>
-  <el-button>Button</el-button>
-  <el-button>Button</el-button>
-  <el-button>Button</el-button>
+  <el-button type="primary" icon="arrow-left">上一页</el-button>
+  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button>
 </el-button-group>
 <div></div>
 <el-button-group>
@@ -130,6 +122,31 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 ```
 :::

+### 加载中
+
+点击按钮后进行数据加载操作，在按钮上显示加载状态。
+
+:::demo 要设置为 loading 状态，只要设置`loading`属性为`true`即可。
+
+```html
+<el-button type="primary" :loading="true">Button</el-button>
+```
+:::
+
+### 不同尺寸
+
+Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
+
+:::demo 额外的尺寸：`large`、`small`、`mini`，通过设置`size`属性来配置它们。
+
+```html
+<el-button type="primary" size="large">large</el-button>
+<el-button type="primary">Default</el-button>
+<el-button type="primary" size="small">small</el-button>
+<el-button type="primary" size="mini">mini</el-button>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |

--- a/examples/docs/card.md
+++ b/examples/docs/card.md
@@ -48,7 +48,7 @@
 ### 基础用法


-下面是一个带有标题、内容和操作（按钮）的 Card 组件示例，需要注意的是，部分样式需要你自己填入。
+包含标题，内容和操作。

 :::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
 ```html
@@ -79,9 +79,8 @@
 :::

 ### 进阶使用
-可以让你的卡片极大程度的被个性化，为更丰富的内容展示服务。

-下例是一个带图片的示例，能帮助你更好地理解`body-style`配合分发内容自定义样式的强大：
+可配置定义更丰富的内容展示。

 :::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
 ```html

--- a/examples/docs/checkbox.md
+++ b/examples/docs/checkbox.md
@@ -5,6 +5,8 @@
        checkList: ['选中且禁用','复选框 A'],
        // checkList2: ['复选框 A'],
        checked: true,
+        checked1: false,
+        checked2: true,
        name: 'Jonny',
        a: 'Jonny',
        b: 'Lara'
@@ -30,6 +32,8 @@

 ### 基础用法

+适用广泛的基础用法。
+
 :::demo 在`el-checkbox`元素中定义`v-model`绑定变量，单一的`checkbox`中，默认绑定变量的值会是`Boolean`，选中为`true`。

 ```html
@@ -48,6 +52,30 @@
 ```
 :::

+## 禁用状态
+
+多选框不可用状态。
+
+::: demo 设置`disabled`属性即可。
+
+```html
+<template>
+  <el-checkbox class="checkbox" v-model="checked1" disabled>备选项</el-checkbox>
+  <el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        checked1: false,
+        checked2: true
+      };
+    }
+  };
+</script>
+```
+:::
+
 ### 多选框组

 :::demo `checkbox-group`元素能把多个 checkbox 管理为一组，只需要在 Group 中使用`v-model`绑定`Array`类型的变量即可，`label`属性除了改变 checkbox 按钮后的介绍外，同时也是该 checkbox 对应的值，`label`与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。