Merge pull request #29 from csvwolf/master

update document of basic

examples/docs/alert.md

@@ -11,7 +11,7 @@
   .demo-box.demo-alert .el-alert {
     margin: 20px 0 0;
   }
-  
+
   .demo-box.demo-alert .el-alert:first-child {
     margin: 0;
   }
@@ -23,7 +23,7 @@
 
 ### 基本用法
 
-页面中的非浮层元素，不会自动消失
+页面中的非浮层元素，不会自动消失。
 
 ::: demo Alert 组件提供四种主题，由`type`属性指定，默认值为`info`。
 ```html
@@ -50,7 +50,7 @@
 
 ### 自定义关闭按钮
 
-自定义关闭按钮为文字或其他符号
+自定义关闭按钮为文字或其他符号。
 
 ::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。设置`close`事件来设置关闭时的回调。
 ```html
@@ -86,7 +86,7 @@
 
 ### 带有 icon
 
-表示某种状态时提升可读性
+表示某种状态时提升可读性。
 
 ::: demo 通过设置`show-icon`属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。
 ```html
@@ -117,7 +117,7 @@
 
 ### 带有辅助性文字介绍
 
-包含标题和内容，解释更详细的警告
+包含标题和内容，解释更详细的警告。
 
 ::: demo 除了必填的`title`属性外，你可以设置`description`属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
 ```html

examples/docs/button.md

@@ -64,7 +64,7 @@
 </style>
 
 ## Button 按钮
-常用的操作按钮
+常用的操作按钮。
 
 ### 基础用法
 
@@ -146,7 +146,6 @@
   <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>
   <el-button type="primary" icon="edit"></el-button>
   <el-button type="primary" icon="share"></el-button>

examples/docs/card.md

@@ -43,7 +43,7 @@
   }
 </style>
 ## Card 卡片
-将信息聚合在卡片容器中展示
+将信息聚合在卡片容器中展示。
 
 ### 基础用法
 

examples/docs/dialog.md

@@ -64,7 +64,7 @@
   }
 </style>
 ## Dialog 对话框
-在保留当前页面状态的情况下，告知用户并承载相关操作
+在保留当前页面状态的情况下，告知用户并承载相关操作。
 
 ### 基本用法
 
@@ -85,31 +85,6 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 ```
 :::
 
-### 设置尺寸
-
-:::demo 提供四种尺寸：`tiny`, `small`, `large`, `full`。通过`size`属性来设置。
-
-```html
-<!-- tiny -->
-<el-button type="text" @click.native="dialogTinyVisible = true">点击打开小尺寸 Dialog</el-button>
-
-<el-dialog title="提示" v-model="dialogTinyVisible" size="tiny">
-  <span>这是一段内容</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click.native="dialogTinyVisible = false">取 消</el-button>
-    <el-button type="primary" @click.native="dialogTinyVisible = false">确 定</el-button>
-  </span>
-</el-dialog>
-
-<!-- 全屏幕Dialog -->
-<el-button type="text" @click.native="dialogFullVisible = true">点击打开全屏幕 Dialog</el-button>
-
-<el-dialog title="提示" v-model="dialogFullVisible" size="full">
-  <img src="http://placekitten.com/1920/1280">
-</el-dialog>
-```
-:::
-
 ### 使用 Dialog 方法打开
 
 :::demo 使用实例`open`和`close`方法，不用显式改变`v-modal`的值。
@@ -141,7 +116,7 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景，如果只
 
 ### 自定义内容
 
-Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例，除此以外，它们并没有什么特殊之处。
+Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。
 
 :::demo
 ```html
@@ -196,7 +171,7 @@ Dialog 组件的正文标题可以是任意的，甚至可以是表格或表单
 | footer | Dialog 按钮操作区的内容 |
 
 ### 方法
-每个`el-dialog`实例都暴露了如下方法，用于在不显式改变`v-model`值的情况下打开 / 关闭实例：
+每个 `el-dialog` 实例都暴露了如下方法，用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例：
 | 方法名 | 说明 |
 |------|--------|
 | open | 打开当前实例 |

examples/docs/icon.md

@@ -60,7 +60,7 @@
 
 ### 使用方法
 
-直接通过设置类名为`el-icon-iconName`来使用即可。
+直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
 
 :::demo
 ```html
@@ -74,8 +74,6 @@
 
 ### 图标集合
 
-下面是目前 Element 所有的图标集合：
-
 <ul class="icon-list">
   <li v-for="name in icons">
     <span>

examples/docs/layout.md

@@ -29,11 +29,11 @@
 
 ## Layout 布局
 
-通过基础的 24 分栏，迅速简便地创建布局
+通过基础的 24 分栏，迅速简便地创建布局。
 
 ### 基础布局
 
-使用单一分栏创建基础的栅格布局
+使用单一分栏创建基础的栅格布局。
 
 ::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
 ```html
@@ -68,7 +68,7 @@
 
 ### 分栏间隔
 
-分栏之间存在间隔
+分栏之间存在间隔。
 
 ::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
 ```html
@@ -83,7 +83,7 @@
 
 ### 混合布局
 
-通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
 
 ::: demo
 ```html
@@ -107,9 +107,9 @@
 
 ### 分栏偏移
 
-分栏支持按一定的栏数进行偏移
+分栏支持按一定的栏数进行偏移。
 
-::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数
+::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。
 ```html
 <el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
@@ -129,7 +129,7 @@
 
 对分栏进行灵活的对齐。
 
-::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式
+::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。
 ```html
 <el-row type="flex" class="row-bg">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>

examples/docs/loading.md

@@ -28,13 +28,13 @@
 </script>
 ## Loading 加载
 
-加载数据时显示动效
+加载数据时显示动效。
 
 ### 区域加载
 
-在表格等容器中加载数据时显示
+在表格等容器中加载数据时显示。
 
-:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加 `body` 修饰符，可以使遮罩插入至 DOM 中的 body 上。
+:::demo 在 Loading 组件中，Element 准备了自定义命令`v-loading`，只需要绑定`Boolean`即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加`body`修饰符，可以使遮罩插入至 DOM 中的 body 上。
 
 ```html
 <template>
@@ -55,9 +55,9 @@
 
 ### 整页加载
 
-页面数据加载时显示
+页面数据加载时显示。
 
-:::demo 当需要全屏遮罩时，可使用 `fullscreen` 修饰符（此时遮罩会插入至 body 上）
+:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）
 
 ```html
 <template>

examples/docs/message-box.md

@@ -60,7 +60,7 @@
 
 ### 消息提示
 
-当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭
+当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
 
 :::demo 调用`$alert`方法即可打开消息提示，它模拟了系统的 `alert`，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，`message`和`title`。值得一提的是，窗口被关闭后，它会返回一个`Promise`对象便于进行后续操作的处理。
 ```html
@@ -82,7 +82,7 @@
 
 ### 确认消息
 
-提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框
+提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
 
 :::demo 调用`$confirm`方法即可打开消息提示，它模拟了系统的 `confirm`。Message Box 组件也拥有极高的定制性，我们可以传入`options`作为第三个参数，它是一个字面量对象。`type`字段表明消息类型，可以为`success`，`error`，`info`和`warning`，无效的设置将会被忽略。注意，第二个参数`title`必须定义为`String`类型，如果是`Object`，会被理解为`options`。在这里我们用了 Promise 来处理后续响应。
 
@@ -117,7 +117,7 @@
 
 ### 提交内容
 
-当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框
+当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。
 
 :::demo 调用`$prompt`方法即可打开消息提示，它模拟了系统的 `prompt`。可以用`inputPattern`字段自己规定匹配模式，或者用`inputValidator`规定校验函数，可以返回`Boolean`或`String`，`Boolean`为`false`或字符串时均表示校验未通过，`String`相当于定义了`inputErrorMessage`字段。此外，可以用`inputPlaceholder`字段来定义输入框的占位符。
 
@@ -153,7 +153,7 @@
 
 ### 自定义
 
-可自定义配置不同内容
+可自定义配置不同内容。
 
 :::demo 以上三个方法都是对`$msgbox`方法的再包装。本例直接调用`$msgbox`方法，使用了`showCancelButton`字段，用于显示取消按钮。另外可使用`cancelButtonClass`为其添加自定义样式，使用`cancelButtonText`来自定义按钮文本。Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表。
 

examples/docs/message.md

@@ -70,7 +70,7 @@
 
 ## Message 消息提示
 
-反馈提示，比 Notification 更为小巧
+反馈提示，比 Notification 更为小巧。
 
 ### 基础用法
 
@@ -136,7 +136,7 @@ Message 提供了四种类型：`success`，`info`，`warning`，`error`，由
 
 ### 可关闭
 
-可以设置为手动关闭的 Message
+可以设置为手动关闭的 Message。
 
 :::demo 默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用`showClose`字段。此外，和 Notification 一样，Message 拥有可控的`duration`，设置`0`为不会被自动关闭，默认为 3000 毫秒。
 ```html