github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

fix docs according to UED

pull/11/head
SkyAo 2016-09-06 12:47:25 +08:00
parent 0080558807
commit 604ee200b3
8 changed files with 180 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/docs/badge.md
View File

@ -2,7 +2,7 @@
出现在按钮、图标旁的数字或状态标记 出现在按钮、图标旁的数字或状态标记
### 基础用法 ### 基础用法
Badge 组件可以在右上角展示标记，最常见的用法是用于展示消息数。 展示新消息数量。
:::demo 定义`value`属性，它接受`Number`或者`String`。 :::demo 定义`value`属性，它接受`Number`或者`String`。
@ -28,7 +28,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
::: :::
### 最大值 ### 最大值
为了方便使用，Badge 组件可以自定义显示的最大值。 可自定义最大值。
:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。 :::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。
@ -43,8 +43,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
::: :::
### 自定义内容 ### 自定义内容
可以显示数字以外的文本内容。
下面是两个样例，它们可以启发你在适时的情况使用 Badge：
:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。 :::demo 定义`value`为`String`类型是时可以用于显示自定义文本。
@ -59,8 +58,7 @@ Badge 组件可以在右上角展示标记，最常见的用法是用于展示
::: :::
### 小红点 ### 小红点
以红点的形式标注需要关注的内容。
可以使 Badge 组件显示为一个小红点，来提醒用户需要关注的内容，此时设置其他属性均无效。
:::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。 :::demo 除了数字外，设置`is-dot`属性，它接受一个`Boolean`。

4
examples/docs/breadcrumb.md
View File

@ -1,14 +1,14 @@
## Breadcrumb 面包屑 ## Breadcrumb 面包屑
显示当前页面的路径，快速返回之前的任意页面 显示当前页面的路径，快速返回之前的任意页面
### 基础使用 ### 基础用法
适用广泛的基础用法。 适用广泛的基础用法。
:::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。 :::demo 在`el-breadcrumb`中使用`el-breadcrumb-item`标签表示从首页开始的每一级。Element 提供了一个`separator`属性，在`el-breadcrumb`标签中设置它来决定分隔符，它只能是字符串，默认为斜杠`/`。
```html ```html
<el-breadcrumb separator="//"> <el-breadcrumb separator="/">
<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>Home</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item> <el-breadcrumb-item>Page 1</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item> <el-breadcrumb-item>Page 1-2</el-breadcrumb-item>

2
examples/docs/card.md
View File

@ -78,7 +78,7 @@
``` ```
::: :::
### 进阶使用 ### 带图片
可配置定义更丰富的内容展示。 可配置定义更丰富的内容展示。

63
examples/docs/dropdown.md
View File

@ -42,25 +42,36 @@
``` ```
::: :::
### 不带独立按钮的下拉菜单 ### 触发对象
可使用按钮触发下拉菜单。
:::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。 :::demo 设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，设置为`false`即可。在选项三和选项四中插入了一条分割线，只需要在选项四中设置`class`为`divider`。
```html ```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>选项二</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 class="divider">选项四</el-dropdown-item>
</el-dropdown> </el-dropdown>
<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>
``` ```
::: :::
### 通过点击触发下拉 ### 触发方式
可以配置 click 激活或者 hover 激活。
:::demo 在`trigger`属性设置为`click`即可。 :::demo 在`trigger`属性设置为`click`即可。
```html ```html
<el-dropdown text="主要按钮" type="primary" trigger="click"> <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>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item> <el-dropdown-item>选项三</el-dropdown-item>
@ -75,50 +86,6 @@
``` ```
::: :::
### 按钮样式
除了上述属性以外，由于本质还是按钮，`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>
```
:::
:::demo
```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-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>
<el-dropdown text="下拉菜单" type="primary" size="mini">
<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>
```
:::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- | |------------- |---------------- |---------------- |---------------------- |-------- |

92
examples/docs/pagination.md
View File

@ -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 ```html
<template> <template>
<el-pagination <el-row>
@sizechange="handleSizeChange" <el-col :span="24">
@currentchange="handleCurrentChange" <el-pagination
:current-page="5" @sizechange="handleSizeChange"
:page-sizes="[100, 200, 300, 400]" @currentchange="handleCurrentChange"
:page-size="100" :current-page="5"
layout="sizes, prev, pager, next, jumper, total" :page-sizes="[100, 200, 300, 400]"
:total="1000"> :page-size="100"
</el-pagination> 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> </template>
<script> <script>
export default { export default {
@ -58,18 +114,12 @@
``` ```
::: :::
<script> <style>
export default { .el-col {
methods: { margin-bottom: 10px;
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
} }
</script> </style>
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |

56
examples/docs/radio.md
View File

@ -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`。 :::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`两种（如果不设定为默认）。 :::demo 只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
```html ```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 ### Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |

93
examples/docs/tabs.md
View File

@ -37,17 +37,19 @@
## Tabs 标签页 ## 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`，可以达成相同效果。 :::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 ```html
<template> <template>
<el-tabs :active-name="activeName"> <el-tabs :active-name="activeName">
<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 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 label="选项卡四"></el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
@ -62,39 +64,19 @@
``` ```
::: :::
### 多种风格 ### 选项卡样式
除了上例中的风格外，我们还提供了标签和卡片两种风格。 选项卡样式的标签页。
:::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。 :::demo 只需要设置`type`属性即可，如果需要标签风格，将其设置为`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>
<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>
```
:::
### 可关闭的标签
:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
```html ```html
<template> <template>
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove"> <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-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> </el-tabs>
</template> </template>
<script> <script>
@ -112,6 +94,51 @@
``` ```
::: :::
### 可关闭
可以关闭标签页
:::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-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab) {
console.log(tab);
}
}
};
</script>
```
:::
### 卡片化
卡片化的标签页。
:::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 ### Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |

12
examples/docs/tag.md
View File

@ -33,8 +33,6 @@
### 基础使用 ### 基础使用
Tag 组件提供了六种主题。
:::demo 由`type`属性来定义，该属性可选填。 :::demo 由`type`属性来定义，该属性可选填。
```html ```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`事件可以处理关闭后的回调函数。 :::demo 设置`closable`属性来定义一个可移除的标签，接受一个`Boolean`，设置为`true`即可。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。设置`close`事件可以处理关闭后的回调函数。