From ec2e06037ec81941b393a55b89c16f19f5b6787b Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Fri, 19 Aug 2016 19:05:27 +0800 Subject: [PATCH] Add Steps component Update docs Clear space Update doc --- components.json | 6 + examples/docs/steps.md | 183 +++++++++++++++++++ examples/icon.json | 2 +- examples/nav.config.json | 6 + packages/step/index.js | 7 + packages/steps/cooking.conf.js | 31 ++++ packages/steps/index.js | 7 + packages/steps/package.json | 15 ++ packages/steps/src/step.vue | 124 +++++++++++++ packages/steps/src/steps.vue | 38 ++++ packages/theme-default/src/common/var.css | 6 + packages/theme-default/src/index.css | 2 + packages/theme-default/src/step.css | 204 ++++++++++++++++++++++ packages/theme-default/src/steps.css | 17 ++ src/index.js | 20 ++- 15 files changed, 660 insertions(+), 8 deletions(-) create mode 100644 examples/docs/steps.md create mode 100644 packages/step/index.js create mode 100644 packages/steps/cooking.conf.js create mode 100644 packages/steps/index.js create mode 100644 packages/steps/package.json create mode 100644 packages/steps/src/step.vue create mode 100644 packages/steps/src/steps.vue create mode 100644 packages/theme-default/src/step.css create mode 100644 packages/theme-default/src/steps.css diff --git a/components.json b/components.json index 0e25f11b..eee09b91 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 00000000..082bac6b --- /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/icon.json b/examples/icon.json index e9aaaa39..e3be3e09 100644 --- a/examples/icon.json +++ b/examples/icon.json @@ -1 +1 @@ -["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"] \ No newline at end of file +["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"] \ No newline at end of file diff --git a/examples/nav.config.json b/examples/nav.config.json index 1478a721..acf1d796 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 00000000..99a8499c --- /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 00000000..a839acb1 --- /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 00000000..1e2bf55f --- /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 00000000..b76b00d2 --- /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 00000000..bc020bd8 --- /dev/null +++ b/packages/steps/src/step.vue @@ -0,0 +1,124 @@ + + + diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue new file mode 100644 index 00000000..773a0d88 --- /dev/null +++ b/packages/steps/src/steps.vue @@ -0,0 +1,38 @@ + + + diff --git a/packages/theme-default/src/common/var.css b/packages/theme-default/src/common/var.css index 0fd174f6..3e0d8692 100644 --- a/packages/theme-default/src/common/var.css +++ b/packages/theme-default/src/common/var.css @@ -367,4 +367,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 da952da9..80eb0c99 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 00000000..9a6b5bf1 --- /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 00000000..c518b23d --- /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 0fcf681a..7a3f3d13 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 };