From 604ee200b34c5e9c4426dd626a4c30012f0d4ee0 Mon Sep 17 00:00:00 2001 From: SkyAo Date: Tue, 6 Sep 2016 12:47:25 +0800 Subject: [PATCH] fix docs according to UED --- examples/docs/badge.md | 10 ++-- examples/docs/breadcrumb.md | 4 +- examples/docs/card.md | 2 +- examples/docs/dropdown.md | 63 ++++++------------------- examples/docs/pagination.md | 92 +++++++++++++++++++++++++++--------- examples/docs/radio.md | 56 +++++++++++----------- examples/docs/tabs.md | 93 ++++++++++++++++++++++++------------- examples/docs/tag.md | 12 ----- 8 files changed, 180 insertions(+), 152 deletions(-) diff --git a/examples/docs/badge.md b/examples/docs/badge.md index 6886a2cdc..63e90e35f 100644 --- 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`。 diff --git a/examples/docs/breadcrumb.md b/examples/docs/breadcrumb.md index 5111bb926..e34216418 100644 --- a/examples/docs/breadcrumb.md +++ b/examples/docs/breadcrumb.md @@ -1,14 +1,14 @@ ## Breadcrumb 面包屑 显示当前页面的路径，快速返回之前的任意页面 -### 基础使用 +### 基础用法 适用广泛的基础用法。 :::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。 ```html - + Home Page 1 Page 1-2 diff --git a/examples/docs/card.md b/examples/docs/card.md index 95d808e5c..a06637c83 100644 --- a/examples/docs/card.md +++ b/examples/docs/card.md @@ -78,7 +78,7 @@ ``` ::: -### 进阶使用 +### 带图片 可配置定义更丰富的内容展示。 diff --git a/examples/docs/dropdown.md b/examples/docs/dropdown.md index bad23adad..7d483a5eb 100644 --- a/examples/docs/dropdown.md +++ b/examples/docs/dropdown.md @@ -42,25 +42,36 @@ ``` ::: -### 不带独立按钮的下拉菜单 +### 触发对象 + +可使用按钮触发下拉菜单。 :::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。 ```html - + 选项一 选项二 选项三 选项四 + + + 选项一 + 选项二 + 选项三 + 选项四 + ``` ::: -### 通过点击触发下拉 +### 触发方式 + +可以配置 click 激活或者 hover 激活。 :::demo 在`trigger`属性设置为`click`即可。 ```html - + 选项一 选项二 选项三 @@ -75,50 +86,6 @@ ``` ::: -### 按钮样式 - -除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能： - -:::demo -```html - - 选项一 - 选项二 - 选项三 -
  • 选项四 - -``` -::: - -:::demo -```html - - 选项一 - 选项二 - 选项三 -
  • 选项四 - - - 选项一 - 选项二 - 选项三 - 选项四 - - - 选项一 - 选项二 - 选项三 - 选项四 - - - 选项一 - 选项二 - 选项三 - 选项四 - -``` -::: - ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |------------- |---------------- |---------------- |---------------------- |-------- | diff --git a/examples/docs/pagination.md b/examples/docs/pagination.md index f194c8bed..9385f598b 100644 --- a/examples/docs/pagination.md +++ b/examples/docs/pagination.md @@ -27,21 +27,77 @@ ``` ::: +### 复杂分页 + +能够承载复杂交互的分页。 + +:::demo `total`只要足够大，就会产生复杂分页的样式。 +```html + + +``` +::: + ### 附加功能 -:::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 + + ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/examples/docs/radio.md b/examples/docs/radio.md index cac1ee0ce..00e123279 100644 --- a/examples/docs/radio.md +++ b/examples/docs/radio.md @@ -44,7 +44,31 @@ ``` ::: -### Radio Group +### 禁用状态 + +单选框不可用的状态。 + +:::demo 注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。 +```html + + + +``` +::: + +### 单选框组 :::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 - - - -``` -::: - ### Radio Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md index 44c096f15..3b5cde7e8 100644 --- 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 +``` +::: + +### 卡片化 + +卡片化的标签页。 + +:::demo 将`type`设置为`border-card`。 +```html + + + + + + +``` +::: + ### Tabs Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | diff --git a/examples/docs/tag.md b/examples/docs/tag.md index 055000f4b..7fa49c01f 100644 --- 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 -标签 -``` -::: - ### 可移除的标签 :::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。