diff --git a/components.json b/components.json
index 0e25f11b5..eee09b91d 100644
--- a/components.json
+++ b/components.json
@@ -154,5 +154,11 @@
],
"rate": [
"./packages/rate/index.js"
+ ],
+ "steps": [
+ "./packages/steps/index.js"
+ ],
+ "step": [
+ "./packages/step/index.js"
]
}
diff --git a/examples/docs/steps.md b/examples/docs/steps.md
new file mode 100644
index 000000000..082bac6bf
--- /dev/null
+++ b/examples/docs/steps.md
@@ -0,0 +1,183 @@
+## 基础用法
+简单的步骤条。
+
+### 定宽步骤条
+
+
+
+
+
+
+
+下一步
+
+
+
+```html
+
+
+
+
+
+
+下一步
+
+
+```
+
+### 自适应步骤条
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## 含状态步骤
+每一步骤显示出该步骤的状态。
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## 有描述的步骤条
+每个步骤有其对应的步骤状态描述。
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## 带图标的步骤条
+步骤条内可以启用各种自定义的图标。
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## 竖式步骤条
+竖直方向的步骤条。
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## 步骤错误提示
+每一步骤显示出该步骤的状态。
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+## API
+
+### Steps.props
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|---------- |-------- |---------- |------------- |-------- |
+| space | 每个 step 的间距，不填写将自适应间距 | Number | | |
+| direction | 显示方向 | String | `vertical` `horizontal` | `horizontal` |
+| active | 设置当前激活步骤 | Number | | 0 |
+| process-status | 设置当前步骤的状态 | String | `wait` `process` `finish` `error` `success` | `process` |
+| finish-status | 设置结束步骤的状态 | String | `wait` `process` `finish` `error` `success` | `finish` |
+
+### Step.props
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|---------- |-------- |---------- |------------- |-------- |
+| title | 标题 | String | | |
+| description | 描述性文字 | String | | |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | String | |
+
+
+### Step.slot
+| name | 说明 |
+|----|----|
+| icon | 图标 |
+| title | 标题 |
+| description | 描述性文字 |
+
diff --git a/examples/nav.config.json b/examples/nav.config.json
index 1478a721d..acf1d7964 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -205,6 +205,12 @@
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
+ },
+ {
+ "path": "/steps",
+ "name": "步骤条 (steps)",
+ "title": "Steps 步骤",
+ "description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
},
diff --git a/packages/step/index.js b/packages/step/index.js
new file mode 100644
index 000000000..99a8499ca
--- /dev/null
+++ b/packages/step/index.js
@@ -0,0 +1,7 @@
+const Step = require('../steps/src/step');
+
+Step.install = function(Vue) {
+ Vue.component(Step.name, Step);
+};
+
+module.exports = Step;
diff --git a/packages/steps/cooking.conf.js b/packages/steps/cooking.conf.js
new file mode 100644
index 000000000..a839acb17
--- /dev/null
+++ b/packages/steps/cooking.conf.js
@@ -0,0 +1,31 @@
+var cooking = require('cooking');
+var path = require('path');
+
+cooking.set({
+ entry: {
+ index: path.join(__dirname, 'index.js')
+ },
+ dist: path.join(__dirname, 'lib'),
+ template: false,
+ format: 'umd',
+ moduleName: 'ElSteps',
+ extractCSS: 'style.css',
+
+ extends: ['vue', 'saladcss']
+});
+
+cooking.add('resolve.alias', {
+ 'main': path.join(__dirname, '../../src'),
+ 'packages': path.join(__dirname, '../../packages')
+});
+
+cooking.add('externals', {
+ vue: {
+ root: 'Vue',
+ commonjs: 'vue',
+ commonjs2: 'vue',
+ amd: 'vue'
+ }
+});
+
+module.exports = cooking.resolve();
diff --git a/packages/steps/index.js b/packages/steps/index.js
new file mode 100644
index 000000000..1e2bf55fe
--- /dev/null
+++ b/packages/steps/index.js
@@ -0,0 +1,7 @@
+const Steps = require('./src/steps');
+
+Steps.install = function(Vue) {
+ Vue.component(Steps.name, Steps);
+};
+
+module.exports = Steps;
diff --git a/packages/steps/package.json b/packages/steps/package.json
new file mode 100644
index 000000000..b76b00d26
--- /dev/null
+++ b/packages/steps/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "el-steps",
+ "version": "0.0.0",
+ "description": "A steps component for Vue.js.",
+ "keywords": [
+ "element",
+ "vue",
+ "component"
+ ],
+ "main": "./lib/index.js",
+ "repository": "https://github.com/element-component/element/tree/master/packages/steps",
+ "author": "elemefe",
+ "license": "MIT",
+ "dependencies": {}
+}
diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
new file mode 100644
index 000000000..bc020bd87
--- /dev/null
+++ b/packages/steps/src/step.vue
@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+
+
+ {{ title }}
+
+
+ {{ description }}
+
+
+
+
+
+
diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css
index e213d2463..0aa516942 100644
--- a/packages/theme-default/src/common/var.css
+++ b/packages/theme-default/src/common/var.css
@@ -372,4 +372,10 @@
--card-border-color: var(--disabled-border-base);
--card-border-radius: 4px;
--card-padding: 20px;
+
+ /*Steps
+ --------------------------*/
+ --steps-border-color: var(--disabled-border-base);
+ --steps-border-radius: 4px;
+ --steps-padding: 20px;
}
diff --git a/packages/theme-default/src/index.css b/packages/theme-default/src/index.css
index da952da9e..80eb0c999 100644
--- a/packages/theme-default/src/index.css
+++ b/packages/theme-default/src/index.css
@@ -35,3 +35,5 @@
@import "./badge.css";
@import "./card.css";
@import "./rate.css";
+@import "./steps.css";
+@import "./step.css";
diff --git a/packages/theme-default/src/step.css b/packages/theme-default/src/step.css
new file mode 100644
index 000000000..9a6b5bf1d
--- /dev/null
+++ b/packages/theme-default/src/step.css
@@ -0,0 +1,204 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+ @b step {
+ position: relative;
+ vertical-align: top;
+
+ @when horizontal {
+ display: inline-block;
+ }
+
+ @when vertical {
+ & .el-step__head,
+ & .el-step__main {
+ display: inline-block;
+ }
+
+ & .el-step__main {
+ padding-left: 10px;
+ }
+ }
+
+ @e line {
+ display: inline-block;
+ position: absolute;
+ border-color: inherit;
+ background-color: #c0ccda;
+ z-index: -1;
+
+ @when icon {
+ @when horizontal {
+ width: 55%;
+ margin-left: 35px;
+ }
+
+ @when vertical {
+ height: 55%;
+ margin-top: 35px;
+ }
+ }
+
+ @when horizontal {
+ top: 15px;
+ height: 2px;
+ width: 100%;
+ margin-right: -14px;
+ }
+
+ @when vertical {
+ width: 2px;
+ height: 100%;
+ box-sizing: border-box;
+ padding-top: 28px;
+ }
+ }
+
+ @e line-inner {
+ display: inherit;
+ border-width: 1px;
+ border-style: solid;
+ border-color: inherit;
+ transition: all 150ms;
+ width: 0;
+ height: 0;
+ }
+
+ @e icon {
+ line-height: 28px;
+ }
+
+ @e head {
+ circle: 28px transparent;
+ text-align: center;
+ line-height: 28px;
+ font-size: 28px;
+ vertical-align: top;
+ transition: all 150ms;
+
+ @when text {
+ font-size: 14px;
+ border-width: 2px;
+ border-style: solid;
+
+ @when process {
+ color: #fff;
+ background-color: #c0ccda;
+ border-color: #c0ccda;
+ }
+
+ @when wait {
+ color: #c0ccda;
+ background-color: #fff;
+ border-color: #c0ccda;
+ }
+
+ @when success {
+ color: #fff;
+ background-color: #13ce66;
+ border-color: #13ce66;
+ }
+
+ @when error {
+ color: #fff;
+ background-color: #ff4949;
+ border-color: #ff4949;
+ }
+
+ @when finish {
+ color: #fff;
+ background-color: #20a0ff;
+ border-color: #20a0ff;
+ }
+ }
+
+ @when process {
+ color: #c0ccda;
+ border-color: #c0ccda;
+ }
+
+ @when wait {
+ color: #c0ccda;
+ border-color: #c0ccda;
+ }
+
+ @when success {
+ color: #13ce66;
+ border-color: #13ce66;
+ }
+
+ @when error {
+ color: #ff4949;
+ border-color: #ff4949;
+ }
+
+ @when finish {
+ color: #20a0ff;
+ border-color: #20a0ff;
+ }
+ }
+
+ @e main {
+ white-space: normal;
+ padding-right: 10px;
+ }
+
+ @e title {
+ font-size: 14px;
+ margin-top: 5px;
+ display: inline-block;
+
+ @when process {
+ font-weight: 700;
+ color: #475669;
+ }
+
+ @when wait {
+ font-weight: normal;
+ color: #99a9bf;
+ }
+
+ @when success {
+ font-weight: 700;
+ color: #13ce66;
+ }
+
+ @when error {
+ font-weight: 700;
+ color: #ff4949;
+ }
+
+ @when finish {
+ font-weight: 700;
+ color: #20a0ff;
+ }
+ }
+
+ @e description {
+ font-size: 12px;
+ font-weight: normal;
+ line-height: 14px;
+
+ @when process {
+ color: #8492a6;
+ }
+
+ @when wait {
+ color: #c0ccda;
+ }
+
+ @when success {
+ color: #13ce66;
+ }
+
+ @when error {
+ color: #ff4949;
+ }
+
+ @when finish {
+ color: #20a0ff;
+ }
+ }
+ }
+}
diff --git a/packages/theme-default/src/steps.css b/packages/theme-default/src/steps.css
new file mode 100644
index 000000000..c518b23d6
--- /dev/null
+++ b/packages/theme-default/src/steps.css
@@ -0,0 +1,17 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+ @b steps {
+ overflow: hidden;
+ font-size: 0;
+
+ > :last-child .el-step__line {
+ display: none;
+ }
+
+ @when horizontal {
+ white-space: nowrap;
+ }
+ }
+}
diff --git a/src/index.js b/src/index.js
index 0fcf681a1..7a3f3d135 100644
--- a/src/index.js
+++ b/src/index.js
@@ -43,13 +43,15 @@ import Loading from '../packages/loading/index.js';
import Icon from '../packages/icon/index.js';
import Row from '../packages/row/index.js';
import Col from '../packages/col/index.js';
-import Upload from '../packages/upload/index.js';
+// import Upload from '../packages/upload/index.js';
import Progress from '../packages/progress/index.js';
import Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
+import Badge from '../packages/badge/index.js';
import Card from '../packages/card/index.js';
import Rate from '../packages/rate/index.js';
-import Badge from '../packages/badge/index.js';
+import Steps from '../packages/steps/index.js';
+import Step from '../packages/step/index.js';
const install = function(Vue) {
if (install.installed) return;
@@ -96,13 +98,15 @@ const install = function(Vue) {
Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
- Vue.component(Upload.name, Upload);
+ // Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message);
+ Vue.component(Badge.name, Badge);
Vue.component(Card.name, Card);
Vue.component(Rate.name, Rate);
- Vue.component(Badge.name, Badge);
+ Vue.component(Steps.name, Steps);
+ Vue.component(Step.name, Step);
Vue.use(Loading);
@@ -166,11 +170,13 @@ module.exports = {
Icon,
Row,
Col,
- Upload,
+ // Upload,
Progress,
Spinner,
+ Message,
+ Badge,
Card,
Rate,
- Message,
- Badge
+ Steps,
+ Step
};