mirror of https://github.com/ElemeFE/element
Menu,Breadcrumb,Steps,Tabs: update doc and fix style
qingwei.li
parent
4a96617af0
commit
1683461d91
|
|
@ -1,5 +1,5 @@
|
|||
## Breadcrumb 面包屑
|
||||
显示当前页面的路径，快速返回之前的任意页面
|
||||
显示当前页面的路径，快速返回之前的任意页面。
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
|
@ -9,10 +9,10 @@
|
|||
|
||||
```html
|
||||
<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>
|
||||
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
```
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
## NavMenu 导航菜单
|
||||
|
||||
为网站提供导航功能的菜单
|
||||
为网站提供导航功能的菜单。
|
||||
|
||||
### 顶栏
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@
|
|||
</script>
|
||||
|
||||
## Steps 步骤条
|
||||
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步
|
||||
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
|
||||
|
||||
### 基础步骤条
|
||||
### 基础用法
|
||||
|
||||
下两例分别展示了定宽的步骤条和自适应的步骤条：
|
||||
简单的步骤条。
|
||||
|
||||
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
|
||||
```html
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<el-button @click.native="next">下一步</el-button>
|
||||
<el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
@ -49,19 +49,9 @@
|
|||
```
|
||||
:::
|
||||
|
||||
:::demo Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
|
||||
```html
|
||||
<el-steps :active="1" process-status="error">
|
||||
<el-step title="步骤 1"></el-step>
|
||||
<el-step title="步骤 2"></el-step>
|
||||
<el-step title="步骤 3"></el-step>
|
||||
</el-steps>
|
||||
```
|
||||
:::
|
||||
### 含状态步骤条
|
||||
|
||||
### 状态与描述
|
||||
|
||||
Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
|
||||
每一步骤显示出该步骤的状态。
|
||||
|
||||
:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
|
||||
```html
|
||||
|
|
@ -73,7 +63,9 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
|
|||
```
|
||||
:::
|
||||
|
||||
除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
|
||||
### 有描述的步骤条
|
||||
|
||||
每个步骤有其对应的步骤状态描述。
|
||||
|
||||
:::demo
|
||||
```html
|
||||
|
|
@ -86,6 +78,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
|
|||
:::
|
||||
|
||||
### 带图标的步骤条
|
||||
步骤条内可以启用各种自定义的图标。
|
||||
|
||||
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
|
||||
```html
|
||||
|
|
@ -99,7 +92,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
|
|||
|
||||
### 竖式步骤条
|
||||
|
||||
默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。
|
||||
竖直方向的步骤条。
|
||||
|
||||
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
|
||||
```html
|
||||
|
|
|
|||
|
|
@ -2,20 +2,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabs: [{
|
||||
title: '选项卡一',
|
||||
content: '选项卡一内容'
|
||||
},{
|
||||
title: '选项卡二',
|
||||
content: '选项卡二内容'
|
||||
},{
|
||||
title: '选项卡三',
|
||||
content: '选项卡三内容'
|
||||
},{
|
||||
title: '选项卡四',
|
||||
content: '选项卡四内容'
|
||||
}],
|
||||
activeName: 'two',
|
||||
activeName: 'first',
|
||||
activeName2: ''
|
||||
}
|
||||
},
|
||||
|
|
@ -35,7 +22,7 @@
|
|||
}
|
||||
</style>
|
||||
## Tabs 标签页
|
||||
分隔内容上有关联但属于不同类别的数据集合
|
||||
分隔内容上有关联但属于不同类别的数据集合。
|
||||
|
||||
### 基础用法
|
||||
|
||||
|
|
@ -46,17 +33,17 @@
|
|||
```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 name="first" 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 {
|
||||
data() {
|
||||
return {
|
||||
activeName: 'two'
|
||||
activeName: 'first'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
@ -73,10 +60,10 @@
|
|||
```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-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>
|
||||
|
|
@ -96,17 +83,17 @@
|
|||
|
||||
### 可关闭
|
||||
|
||||
可以关闭标签页
|
||||
可以关闭标签页。
|
||||
|
||||
:::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>
|
||||
|
|
@ -131,10 +118,10 @@
|
|||
:::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-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>
|
||||
```
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -112,8 +112,10 @@ export default {
|
|||
this.style = { width: space };
|
||||
// this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
|
||||
} else {
|
||||
if (parent.steps[parent.steps.length - 1] !== this) {
|
||||
this.style = { height: space };
|
||||
}
|
||||
}
|
||||
|
||||
const unwatch = this.$watch('index', val => {
|
||||
this.$watch('$parent.active', this.updateStatus, { immediate: true });
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
& .el-step__main {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
& .el-step__description {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@e line {
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding: var(--tooltip-padding);
|
||||
z-index: var(--index-popper);
|
||||
font-size: var(--tooltip-font-size);
|
||||
line-height: 1;
|
||||
line-height: 1.2;
|
||||
|
||||
.popper__arrow,
|
||||
.popper__arrow::after {
|
||||
|
|
|
|||
Loading…
Reference in New Issue