Skip to content

E
Element
Commit 1683461d authored by qingwei.li's avatar qingwei.li
Browse files
Options

Menu,Breadcrumb,Steps,Tabs: update doc and fix style

parent 4a96617a
Show whitespace changes
Inline Side-by-side
Showing with 45 additions and 59 deletions
examples/docs/breadcrumb.md
View file @ 1683461d
## Breadcrumb 面包屑 ## Breadcrumb 面包屑
显示当前页面的路径，快速返回之前的任意页面 显示当前页面的路径，快速返回之前的任意页面。
### 基础用法 ### 基础用法
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
```html ```html
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>Page 1</el-breadcrumb-item> <el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2</el-breadcrumb-item> <el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>Page 1-2-1</el-breadcrumb-item> <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
``` ```
::: :::
......
examples/docs/menu.md
View file @ 1683461d
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
## NavMenu 导航菜单 ## NavMenu 导航菜单
为网站提供导航功能的菜单 为网站提供导航功能的菜单。
### 顶栏 ### 顶栏
......
examples/docs/steps.md
View file @ 1683461d
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
</script> </script>
## Steps 步骤条 ## Steps 步骤条
引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。
### 基础步骤条 ### 基础用法
下两例分别展示了定宽的步骤条和自适应的步骤条： 简单的步骤条。
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。 :::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
```html ```html
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<el-step title="步骤 3"></el-step> <el-step title="步骤 3"></el-step>
</el-steps> </el-steps>
<el-button @click.native="next">下一步</el-button> <el-button style="margin-top: 12px;" @click.native="next">下一步</el-button>
<script> <script>
export default { export default {
...@@ -49,19 +49,9 @@ ...@@ -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 可供参考。 :::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
```html ```html
...@@ -73,7 +63,9 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。 ...@@ -73,7 +63,9 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
``` ```
::: :::
除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子： ### 有描述的步骤条
每个步骤有其对应的步骤状态描述。
:::demo :::demo
```html ```html
...@@ -86,6 +78,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。 ...@@ -86,6 +78,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
::: :::
### 带图标的步骤条 ### 带图标的步骤条
步骤条内可以启用各种自定义的图标。
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。 :::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
```html ```html
...@@ -99,7 +92,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。 ...@@ -99,7 +92,7 @@ Steps 组件中，我们可以定义每一个步骤的标题（或状态）。
### 竖式步骤条 ### 竖式步骤条
默认情况下，步骤条为横向显示，也可以显示竖向显示的步骤条。 竖直方向的步骤条。
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。 :::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
```html ```html
......
examples/docs/tabs.md
View file @ 1683461d
...@@ -2,20 +2,7 @@ ...@@ -2,20 +2,7 @@
export default { export default {
data() { data() {
return { return {
tabs: [{ activeName: 'first',
title: '选项卡一',
content: '选项卡一内容'
},{
title: '选项卡二',
content: '选项卡二内容'
},{
title: '选项卡三',
content: '选项卡三内容'
},{
title: '选项卡四',
content: '选项卡四内容'
}],
activeName: 'two',
activeName2: '' activeName2: ''
} }
}, },
...@@ -35,7 +22,7 @@ ...@@ -35,7 +22,7 @@
} }
</style> </style>
## Tabs 标签页 ## Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合 分隔内容上有关联但属于不同类别的数据集合。
### 基础用法 ### 基础用法
...@@ -46,17 +33,17 @@ ...@@ -46,17 +33,17 @@
```html ```html
<template> <template>
<el-tabs :active-name="activeName"> <el-tabs :active-name="activeName">
<el-tab-pane label="选项卡一"></el-tab-pane> <el-tab-pane name="first" 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-tab-pane label="定时任务补偿"></el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
activeName: 'two' activeName: 'first'
}; };
} }
}; };
...@@ -73,10 +60,10 @@ ...@@ -73,10 +60,10 @@
```html ```html
<template> <template>
<el-tabs type="card" @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>
...@@ -96,17 +83,17 @@ ...@@ -96,17 +83,17 @@
### 可关闭 ### 可关闭
可以关闭标签页 可以关闭标签页。
:::demo 在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。 :::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" :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> </el-tabs>
</template> </template>
<script> <script>
...@@ -131,10 +118,10 @@ ...@@ -131,10 +118,10 @@
:::demo 将`type`设置为`border-card`。 :::demo 将`type`设置为`border-card`。
```html ```html
<el-tabs type="border-card"> <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> </el-tabs>
``` ```
::: :::
......
packages/steps/src/step.vue
View file @ 1683461d
...@@ -112,8 +112,10 @@ export default { ...@@ -112,8 +112,10 @@ export default {
this.style = { width: space }; this.style = { width: space };
// this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px'; // this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
} else { } else {
if (parent.steps[parent.steps.length - 1] !== this) {
this.style = { height: space }; this.style = { height: space };
} }
}
const unwatch = this.$watch('index', val => { const unwatch = this.$watch('index', val => {
this.$watch('$parent.active', this.updateStatus, { immediate: true }); this.$watch('$parent.active', this.updateStatus, { immediate: true });
......
packages/theme-default/src/step.css
View file @ 1683461d
...@@ -19,6 +19,10 @@ ...@@ -19,6 +19,10 @@
& .el-step__main { & .el-step__main {
padding-left: 10px; padding-left: 10px;
} }
& .el-step__description {
width: 300px;
}
} }
@e line { @e line {
......
packages/theme-default/src/tooltip.css
View file @ 1683461d
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
padding: var(--tooltip-padding); padding: var(--tooltip-padding);
z-index: var(--index-popper); z-index: var(--index-popper);
font-size: var(--tooltip-font-size); font-size: var(--tooltip-font-size);
line-height: 1; line-height: 1.2;
.popper__arrow, .popper__arrow,
.popper__arrow::after { .popper__arrow::after {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment