Skip to content

E
Element
Commit 5ce0e228 authored by Black Wayne's avatar Black Wayne Committed by 杨奕
Browse files
Options

Steps: add chalk theme (#7274) 

* Steps: add chalk theme

* Update steps.md

* Update steps.md

* Update steps.md
parent d34e38a9
Show whitespace changes
Inline Side-by-side
Showing with 404 additions and 213 deletions
examples/docs/en-US/steps.md
View file @ 5ce0e228
...@@ -25,7 +25,7 @@ Simple step bar. ...@@ -25,7 +25,7 @@ Simple step bar.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed. :::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Boolean` type. The unit of the `space` attribute is `px`. If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
```html ```html
<el-steps :space="100" :active="active" finish-status="success"> <el-steps :active="active" finish-status="success">
<el-step title="Step 1"></el-step> <el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step> <el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step> <el-step title="Step 3"></el-step>
...@@ -58,7 +58,7 @@ Shows the status of the step for each step. ...@@ -58,7 +58,7 @@ Shows the status of the step for each step.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page. :::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot`. We have listed all the slot names for you at the end of this page.
```html ```html
<el-steps :space="100" :active="1" finish-status="success"> <el-steps :space="200" :active="1" finish-status="success">
<el-step title="Done"></el-step> <el-step title="Done"></el-step>
<el-step title="Processing"></el-step> <el-step title="Processing"></el-step>
<el-step title="Step 3"></el-step> <el-step title="Step 3"></el-step>
...@@ -66,13 +66,28 @@ Shows the status of the step for each step. ...@@ -66,13 +66,28 @@ Shows the status of the step for each step.
``` ```
::: :::
### Center
Title and desription can be centered.
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step>
<el-step title="Step 4" description="Some description"></el-step>
</el-steps>
```
:::
### Step bar with description ### Step bar with description
There is description for each step. There is description for each step.
:::demo :::demo
```html ```html
<el-steps :space="200" :active="1"> <el-steps :active="1">
<el-step title="Step 1" description="Some description"></el-step> <el-step title="Step 1" description="Some description"></el-step>
<el-step title="Step 2" description="Some description"></el-step> <el-step title="Step 2" description="Some description"></el-step>
<el-step title="Step 3" description="Some description"></el-step> <el-step title="Step 3" description="Some description"></el-step>
...@@ -87,10 +102,10 @@ A variety of custom icons can be used in the step bar. ...@@ -87,10 +102,10 @@ A variety of custom icons can be used in the step bar.
:::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`. :::demo The icon is set by the `icon` property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named `slot`.
```html ```html
<el-steps :space="100" :active="1"> <el-steps :active="1">
<el-step title="Step 1" icon="edit"></el-step> <el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="upload"></el-step> <el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="picture"></el-step> <el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps> </el-steps>
``` ```
::: :::
...@@ -102,10 +117,32 @@ Vertical step bars. ...@@ -102,10 +117,32 @@ Vertical step bars.
:::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element. :::demo You only need to set the `direction` attribute to` vertical` in the `el-steps` element.
```html ```html
<el-steps :space="100" direction="vertical" :active="1"> <div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="Step 1"></el-step> <el-step title="Step 1"></el-step>
<el-step title="Step 2"></el-step> <el-step title="Step 2"></el-step>
<el-step title="Step 3"></el-step> <el-step title="Step 3"></el-step>
</el-steps>
</div>
```
:::
### Simple step bar
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
:::demo
```html
<el-steps :space="200" active="1" simple>
<el-step title="Step 1" icon="el-icon-edit"></el-step>
<el-step title="Step 2" icon="el-icon-upload"></el-step>
<el-step title="Step 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="Step 1" ></el-step>
<el-step title="Step 2" ></el-step>
<el-step title="Step 3" ></el-step>
</el-steps> </el-steps>
``` ```
::: :::
...@@ -114,21 +151,21 @@ Vertical step bars. ...@@ -114,21 +151,21 @@ Vertical step bars.
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — | | space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal | | direction | display direction | string | vertical/horizontal | horizontal |
| active | current activation step | number | — | 0 | | active | current activation step | number | — | 0 |
| process-status | status of current step | string | wait/process/finish/error/success | process | | process-status | status of current step | string | wait / process / finish / error / success | process |
| finish-status | status of end step | string | wait/process/finish/error/success | finish | | finish-status | status of end step | string | wait / process / finish / error / success | finish |
| align-center | whether step description is centered | boolean | — | false | | align-center | center title and description | boolean | — | false |
| center | center whole `Steps` component | boolean | - | false | | simple | whether to apply simple theme | boolean | - | false |
### Step Attributes ### Step Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | step title | string | — | — | | title | step title | string | — | — |
| description | step description | string | — | — | | description | step description | string | — | — |
| icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons | string | — | | icon | step icon | step icon's class name. Icons can be passed via named slot as well | string | — |
| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - | | status | current status. It will be automatically set by Steps if not configured. | wait / process / finish / error / success | - |
### Step Slot ### Step Slot
| Name | Description | | Name | Description |
......
examples/docs/zh-CN/steps.md
View file @ 5ce0e228
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
:::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。 :::demo 设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。设置`finish-status`属性可以改变已经完成的步骤的状态。
```html ```html
<el-steps :space="100" :active="active" finish-status="success"> <el-steps :active="active" finish-status="success">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step> <el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step> <el-step title="步骤 3"></el-step>
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
:::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。 :::demo 也可以使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
```html ```html
<el-steps :space="100" :active="1" finish-status="success"> <el-steps :space="200" :active="1" finish-status="success">
<el-step title="已完成"></el-step> <el-step title="已完成"></el-step>
<el-step title="进行中"></el-step> <el-step title="进行中"></el-step>
<el-step title="步骤 3"></el-step> <el-step title="步骤 3"></el-step>
...@@ -69,10 +69,25 @@ ...@@ -69,10 +69,25 @@
:::demo :::demo
```html ```html
<el-steps :space="200" :active="1"> <el-steps :active="1">
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step> <el-step title="步骤 3" description="这段就没那么长了"></el-step>
</el-steps>
```
:::
### 居中的步骤条
标题和描述都将居中。
:::demo
```html
<el-steps :active="2" align-center>
<el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
<el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps> </el-steps>
``` ```
::: :::
...@@ -82,10 +97,11 @@ ...@@ -82,10 +97,11 @@
:::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。 :::demo 通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名`slot`来使用自定义的图标。
```html ```html
<el-steps :space="100" :active="1">
<el-step title="步骤 1" icon="edit"></el-step> <el-steps :active="1">
<el-step title="步骤 2" icon="upload"></el-step> <el-step title="步骤 1" icon="el-icon-edit"></el-step>
<el-step title="步骤 3" icon="picture"></el-step> <el-step title="步骤 2" icon="el-icon-upload"></el-step>
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps> </el-steps>
``` ```
::: :::
...@@ -96,10 +112,32 @@ ...@@ -96,10 +112,32 @@
:::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。 :::demo 只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
```html ```html
<el-steps :space="100" direction="vertical" :active="1"> <div style="height: 300px;">
<el-steps direction="vertical" :active="1">
<el-step title="步骤 1"></el-step> <el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step> <el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step> <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>
</div>
```
:::
### 简洁风格的步骤条
设置 `simple` 可应用简洁风格，该条件下 `align-center` / `description` / `direction` / `space` 都将失效。
:::demo
```html
<el-steps :active="1" simple>
<el-step title="步骤 1" icon="el-icon-edit"></el-step>
<el-step title="步骤 2" icon="el-icon-upload"></el-step>
<el-step title="步骤 3" icon="el-icon-picture"></el-step>
</el-steps>
<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
<el-step title="步骤 1" ></el-step>
<el-step title="步骤 2" ></el-step>
<el-step title="步骤 3" ></el-step>
</el-steps> </el-steps>
``` ```
::: :::
...@@ -108,21 +146,21 @@ ...@@ -108,21 +146,21 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | Number,String | — | — | | space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | number / string | — | — |
| direction | 显示方向 | string | vertical/horizontal | horizontal | | direction | 显示方向 | string | vertical/horizontal | horizontal |
| active | 设置当前激活步骤 | number | — | 0 | | active | 设置当前激活步骤 | number | — | 0 |
| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process | | process-status | 设置当前步骤的状态 | string | wait / process / finish / error / success | process |
| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish | | finish-status | 设置结束步骤的状态 | string | wait / process / finish / error / success | finish |
| align-center | 标题描述居中对齐 | boolean | - | false | | align-center | 进行居中对齐 | boolean | - | false |
| center | 组件居中显示 | boolean | - | false | | simple | 是否应用简洁风格 | boolean | - | false |
### Step Attributes ### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| title | 标题 | string | — | — | | title | 标题 | string | — | — |
| description | 描述性文字 | string | — | — | | description | 描述性文字 | string | — | — |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — | | icon | 图标 | 传入 icon 的 class 全名来自定义 icon，也支持 slot 方式写入 | string | — |
| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait/process/finish/error/success | - | | status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait / process / finish / error / success | - |
### Step Slot ### Step Slot
| name | 说明 | | name | 说明 |
......
packages/steps/src/step.vue
View file @ 5ce0e228
<template> <template>
<div <div
class="el-step" class="el-step"
:style="[style, isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]" :style="[style, isLast ? { maxWidth: 100 / stepsCount + '%' } : { marginRight: - $parent.stepOffset + 'px' }]"
:class="['is-' + $parent.direction]"> :class="[
!isSimple && `is-${$parent.direction}`,
isSimple && 'is-simple',
isLast && !space && !isCenter && 'is-flex',
isCenter && !isVertical && !isSimple && 'is-center'
]">
<!-- icon & line -->
<div <div
class="el-step__head" class="el-step__head"
:class="['is-' + currentStatus, { 'is-text': !icon }]"> :class="`is-${currentStatus}`">
<div <div
class="el-step__line" class="el-step__line"
:style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }" :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
:class="['is-' + $parent.direction, { 'is-icon': icon }]"> >
<i class="el-step__line-inner" :style="lineStyle"></i> <i class="el-step__line-inner" :style="lineStyle"></i>
</div> </div>
<span class="el-step__icon"> <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
<slot <slot
v-if="currentStatus !== 'success' && currentStatus !== 'error'" v-if="currentStatus !== 'success' && currentStatus !== 'error'"
name="icon"> name="icon">
<i v-if="icon" :class="['el-icon-' + icon]"></i> <i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
<div v-else>{{ index + 1 }}</div> <div class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
</slot> </slot>
<i <i
v-else v-else
:class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"> :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
class="el-step__icon-inner is-status"
>
</i> </i>
</span>
</div> </div>
<div </div>
class="el-step__main" <!-- title & description -->
:style="{ marginLeft: mainOffset }"> <div class="el-step__main">
<div <div
class="el-step__title" class="el-step__title"
ref="title" ref="title"
:class="['is-' + currentStatus]"> :class="['is-' + currentStatus]">
<slot name="title">{{ title }}</slot> <slot name="title">{{ title }}</slot>
</div> </div>
<div v-if="isSimple" class="el-step__arrow"></div>
<div <div
v-else
class="el-step__description" class="el-step__description"
:class="['is-' + currentStatus]"> :class="['is-' + currentStatus]">
<slot name="description">{{ description }}</slot> <slot name="description">{{ description }}</slot>
...@@ -59,7 +68,6 @@ export default { ...@@ -59,7 +68,6 @@ export default {
return { return {
index: -1, index: -1,
lineStyle: {}, lineStyle: {},
mainOffset: 0,
internalStatus: '' internalStatus: ''
}; };
}, },
...@@ -84,31 +92,37 @@ export default { ...@@ -84,31 +92,37 @@ export default {
const prevStep = this.$parent.steps[this.index - 1]; const prevStep = this.$parent.steps[this.index - 1];
return prevStep ? prevStep.currentStatus : 'wait'; return prevStep ? prevStep.currentStatus : 'wait';
}, },
isLast: function() { isCenter() {
return this.$parent.alignCenter;
},
isVertical() {
return this.$parent.direction === 'vertical';
},
isSimple() {
return this.$parent.simple;
},
isLast() {
const parent = this.$parent; const parent = this.$parent;
return parent.steps[parent.steps.length - 1] === this; return parent.steps[parent.steps.length - 1] === this;
}, },
stepsCount() {
return this.$parent.steps.length;
},
space() {
const { isSimple, $parent: { space } } = this;
return isSimple ? '' : space ;
},
style: function() { style: function() {
const parent = this.$parent; const parent = this.$parent;
const isCenter = parent.center;
const len = parent.steps.length; const len = parent.steps.length;
if (isCenter && this.isLast) { const space = (typeof this.space === 'number'
return {}; ? this.space + 'px'
} : this.space
? this.space
: 100 / (len - 1) + '%');
const space = (typeof parent.space === 'number' return { flexBasis: space };
? parent.space + 'px'
: parent.space
? parent.space
: 100 / (isCenter ? len - 1 : len) + '%');
if (parent.direction === 'horizontal') {
return { width: space };
} else {
if (!this.isLast) {
return { height: space };
}
}
} }
}, },
...@@ -133,7 +147,7 @@ export default { ...@@ -133,7 +147,7 @@ export default {
style.transitionDelay = 150 * this.index + 'ms'; style.transitionDelay = 150 * this.index + 'ms';
if (status === this.$parent.processStatus) { if (status === this.$parent.processStatus) {
step = this.currentStatus !== 'error' ? 50 : 0; step = this.currentStatus !== 'error' ? 0 : 0;
} else if (status === 'wait') { } else if (status === 'wait') {
step = 0; step = 0;
style.transitionDelay = (-150 * this.index) + 'ms'; style.transitionDelay = (-150 * this.index) + 'ms';
...@@ -149,14 +163,6 @@ export default { ...@@ -149,14 +163,6 @@ export default {
}, },
mounted() { mounted() {
const parent = this.$parent;
if (parent.direction === 'horizontal') {
if (parent.alignCenter) {
this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
}
}
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 });
unwatch(); unwatch();
......
packages/steps/src/steps.vue
View file @ 5ce0e228
<template> <template>
<div <div
class="el-steps" class="el-steps"
:class="['is-' + direction, center ? 'is-center' : '']"> :class="[
!simple && 'el-steps--' + direction,
simple && 'el-steps--simple'
]">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
...@@ -19,6 +22,7 @@ export default { ...@@ -19,6 +22,7 @@ export default {
}, },
alignCenter: Boolean, alignCenter: Boolean,
center: Boolean, center: Boolean,
simple: Boolean,
finishStatus: { finishStatus: {
type: String, type: String,
default: 'finish' default: 'finish'
......
packages/theme-chalk/src/step.scss
View file @ 5ce0e228
...@@ -3,209 +3,313 @@ ...@@ -3,209 +3,313 @@
@include b(step) { @include b(step) {
position: relative; position: relative;
vertical-align: top; flex-shrink: 1;
&:last-child .el-step__main { @include pseudo(last-of-type) {
@include e(line) {
display: none;
}
// 只有未设置 space 的情况下才自适应宽度
@include when(flex) {
flex-basis: auto !important;
flex-shrink: 0;
flex-grow: 0;
}
@include e((main, description)) {
padding-right: 0; padding-right: 0;
} }
}
@include when(horizontal) { @include e(head) {
display: inline-block; position: relative;
width: 100%;
@include when(process) {
color: $--color-text-primary;
border-color: $--color-text-primary;
} }
@include when(vertical) { @include when(wait) {
& .el-step__head, color: $--color-text-placeholder;
& .el-step__main { border-color: $--color-text-placeholder;
display: inline-block;
} }
& .el-step__main { @include when(success) {
padding-left: 10px; color: $--color-success;
border-color: $--color-success;
}
@include when(error) {
color: $--color-danger;
border-color: $--color-danger;
}
@include when(finish) {
color: $--color-primary;
border-color: $--color-primary;
} }
} }
@include e(line) { @include e(icon) {
display: inline-block; position: relative;
position: absolute; z-index: 1;
display: inline-flex;
justify-content: center;
align-items: center;
width: 24px;
height: 24px;
font-size: 14px;
box-sizing: border-box;
background: $--color-white;
transition: .15s ease-out;
@include when(text) {
border-radius: 50%;
border: 2px solid;
border-color: inherit; border-color: inherit;
background-color: $--color-black; }
@include when(icon) { @include when(icon) {
@include when(horizontal) { width: 40px;
right: 4px;
} }
} }
@include when(horizontal) { @include e(icon-inner) {
top: 15px; display: inline-block;
height: 2px; user-select: none;
left: 32px; text-align: center;
right: 0; font-weight: bold;
line-height: 1;
color: inherit;
&[class*=el-icon]:not(.is-status) {
font-size: 25px;
font-weight: normal;
} }
@include when(vertical) { // 组件自身表示状态的图标
width: 2px; @include when(status) {
box-sizing: border-box; transform: scale(.65) translateY(1px);
top: 32px;
bottom: 0;
left: 15px;
} }
} }
@include e(line) {
position: absolute;
border-color: inherit;
background-color: $--color-text-placeholder;
}
@include e(line-inner) { @include e(line-inner) {
display: block; display: block;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: inherit; border-color: inherit;
transition: all 150ms; transition: .15s ease-out;
box-sizing: border-box; box-sizing: border-box;
width: 0; width: 0;
height: 0; height: 0;
} }
@include e(icon) { @include e(main) {
display: block; white-space: normal;
line-height: 28px; text-align: left;
> * {
line-height: inherit;
vertical-align: middle;
}
} }
@include e(head) { @include e(title) {
width: 28px; font-size: 15px;
height: 28px; line-height: 38px;
border-radius: 50%;
border-color: transparent;
text-align: center;
line-height: 28px;
font-size: 28px;
vertical-align: top;
transition: all 150ms;
@include when(text) {
font-size: 14px;
border-width: 2px;
border-style: solid;
@include when(process) { @include when(process) {
color: $--color-white; font-weight: bold;
background-color: $--color-black; color: $--color-text-primary;
border-color: $--color-black;
} }
@include when(wait) { @include when(wait) {
color: $--color-black; color: $--color-text-placeholder;
background-color: $--color-white;
border-color: $--color-black;
} }
@include when(success) { @include when(success) {
color: $--color-white; color: $--color-success;
background-color: $--color-success;
border-color: $--color-success;
} }
@include when(error) { @include when(error) {
color: $--color-white; color: $--color-danger;
background-color: $--color-danger;
border-color: $--color-danger;
} }
@include when(finish) { @include when(finish) {
color: $--color-white; color: $--color-primary;
background-color: $--color-primary;
border-color: $--color-primary;
} }
} }
@include e(description) {
padding-right: 10%;
margin-top: -5px;
font-size: 12px;
line-height: 20px;
font-weight: normal;
@include when(process) { @include when(process) {
color: $--color-black; color: $--color-text-primary;
border-color: $--color-black;
} }
@include when(wait) { @include when(wait) {
color: $--color-black; color: $--color-text-placeholder;
border-color: $--color-black;
} }
@include when(success) { @include when(success) {
color: $--color-success; color: $--color-success;
border-color: $--color-success;
} }
@include when(error) { @include when(error) {
color: $--color-danger; color: $--color-danger;
border-color: $--color-danger;
} }
@include when(finish) { @include when(finish) {
color: $--color-primary; color: $--color-primary;
border-color: $--color-primary;
} }
} }
@include when(horizontal) {
display: inline-block;
@include e(line) {
height: 2px;
top: 11px;
left: 0;
right: 0;
}
}
@include when(vertical) {
display: flex;
@include e(head) {
flex-grow: 0;
width: 24px;
}
@include e(main) { @include e(main) {
white-space: normal; padding-left: 10px;
padding-right: 10px; flex-grow: 1;
text-align: left;
} }
@include e(title) { @include e(title) {
font-size: 14px; line-height: 24px;
line-height: 32px; padding-bottom: 8px;
display: inline-block; }
@include when(process) { @include e(line) {
font-weight: 700; width: 2px;
color: $--color-black; top: 0;
bottom: 0;
left: 11px;
}
} }
@include when(wait) { @include when(center) {
font-weight: normal;
color: $--color-black; @include e(head) {
text-align: center;
} }
@include when(success) { @include e(main) {
font-weight: 700; text-align: center;
color: $--color-success;
} }
@include when(error) { @include e(description) {
font-weight: 700; padding-left: 20%;
color: $--color-danger; padding-right: 20%;
} }
@include when(finish) { @include e(line) {
font-weight: 700; left: 50%;
color: $--color-primary; right: -50%;
} }
} }
@include e(description) { @include when(simple) {
display: flex;
align-items: center;
@include e(head) {
width: auto;
font-size: 0;
padding-right: 10px;
}
@include e(icon) {
background: transparent;
width: 16px;
height: 16px;
font-size: 12px; font-size: 12px;
font-weight: normal;
line-height: 14px;
@include when(process) { @include when(icon) {
color: $--color-black; width: 30px;
}
} }
@include when(wait) { @include e(icon-inner) {
color: $--color-black; &[class*=el-icon]:not(.is-status) {
font-size: 18px;
} }
@include when(success) { &.is-status {
color: $--color-success; transform: scale(.5) translateY(1px);
}
} }
@include when(error) { @include e(main) {
color: $--color-danger; position: relative;
display: flex;
align-items: stretch;
flex-grow: 1;
} }
@include when(finish) { @include e(title) {
color: $--color-primary; font-size: 16px;
line-height: 20px;
}
@include pseudo('not(:last-of-type)') {
@include e(title) {
max-width: 50%;
word-break: break-all;
}
}
@include e(arrow) {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
&::before,
&::after {
content: '';
display: inline-block;
position: absolute;
height: 15px;
width: 1px;
background: $--color-text-placeholder;
}
&::before {
transform: rotate(-45deg) translateY(-4px);
transform-origin: 0 0;
}
&::after {
transform: rotate(45deg) translateY(4px);
transform-origin: 100% 100%;
}
}
@include pseudo(last-of-type) {
@include e(arrow) {
display: none;
}
} }
} }
} }
packages/theme-chalk/src/steps.scss
View file @ 5ce0e228
@import "mixins/mixins"; @import "mixins/mixins";
@include b(steps) { @include b(steps) {
font-size: 0; display: flex;
> :last-child .el-step__line { @include m(simple) {
display: none; padding: 13px 8%;
border-radius: 4px;
background: $--background-color-base;
} }
@include when(horizontal) { @include m(horizontal) {
white-space: nowrap; white-space: nowrap;
@include when(center) {
text-align: center;
} }
@include m(vertical) {
height: 100%;
flex-flow: column;
} }
} }
test/unit/specs/steps.spec.js
View file @ 5ce0e228
...@@ -25,7 +25,6 @@ describe('Steps', () => { ...@@ -25,7 +25,6 @@ describe('Steps', () => {
<el-step title="step1"></el-step> <el-step title="step1"></el-step>
<el-step title="step2"></el-step> <el-step title="step2"></el-step>
<el-step title="step3"></el-step> <el-step title="step3"></el-step>
<el-step title="step4"></el-step>
</el-steps> </el-steps>
`); `);
...@@ -39,8 +38,8 @@ describe('Steps', () => { ...@@ -39,8 +38,8 @@ describe('Steps', () => {
`); `);
Vue.nextTick(_ => { Vue.nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.width').equal('25%'); expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('50%');
expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.width').equal('100px'); expect(vm2.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('100px');
done(); done();
}); });
}); });
...@@ -118,7 +117,7 @@ describe('Steps', () => { ...@@ -118,7 +117,7 @@ describe('Steps', () => {
`); `);
vm.$nextTick(_ => { vm.$nextTick(_ => {
expect(vm.$el.querySelector('.el-step')).have.deep.property('style.height').equal('200px'); expect(vm.$el.querySelector('.el-step')).have.deep.property('style.webkitFlexBasis').equal('200px');
done(); done();
}); });
}); });
......
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