Skip to content

Commit

Permalink
update(src): new style and features
Browse files Browse the repository at this point in the history
  • Loading branch information
@ex90rts
ex90rts committed Sep 21, 2017
1 parent c2ab76f commit dae0b9b
Show file tree
Hide file tree
Showing 7 changed files with 476 additions and 153 deletions.
133 changes: 90 additions & 43 deletions demo/StepsDemo.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,100 @@ class Demo extends React.Component {

render() {
return (
<div>
<h2>步骤条</h2>
<div className="uxcore-steps-demo">
<h3>横向步骤条(标准)</h3>
<div className="demo-box">
<Steps current={2} type="arrow-bar">
<Step key={0} title={'步骤一'} />
<Step key={1} title={'步骤二'} description="描述文案" />
<Step key={2} title={'步骤三'} status="error" />
<Step key={3} title={'步骤四'} />
</Steps>
</div>
<div className="demo-box">
<Steps current={2} type="bottom-desc">
<Step key={0} title={'步骤一'} description="描述文案" />
<Step key={1} title={'步骤二'} description="描述文案" />
<Step key={2} title={'步骤三'} description="描述文案" />
<Step key={3} title={'步骤四'} description="描述文案" />
</Steps>
</div>
<div className="demo-box">
<Steps current={2} type="bottom-desc">
<Step key={0} title={'步骤一'} description="描述文案" />
<Step key={1} title={'步骤二'} description="描述文案" />
<Step key={2} title={'步骤三'} description="描述文案" status="error" />
<Step key={3} title={'步骤四'} description="描述文案" />
</Steps>
</div>
<div className="demo-box">
<Steps current={2} showIcon={false} type="bottom-desc">
<Step key={0} title={'步骤一'} />
<Step key={1} title={'步骤二'} />
<Step key={2} title={'步骤三'} />
<Step key={3} title={'步骤四'} />
</Steps>
</div>
<div className="demo-box">
<Steps current={2} showIcon={false} type="bottom-desc">
<Step key={0} title={'步骤一'} />
<Step key={1} title={'步骤二'} />
<Step key={2} title={'步骤三'} status="error" />
<Step key={3} title={'步骤四'} />
</Steps>
</div>
<h3>横向步骤条(可返回编辑)</h3>
<div className="demo-box">
<Steps current={2} type="bottom-desc">
<Step key={0} title={'步骤一'} description="描述文案" editable />
<Step key={1} title={'步骤二'} description="描述文案" />
<Step key={2} title={'步骤三'} description="描述文案" />
<Step key={3} title={'步骤四'} description="描述文案" />
</Steps>
</div>
<div className="demo-box">
<Steps current={2} showIcon={false}>
<Step key={0} title={'步骤一'} editable />
<Step key={1} title={'步骤二'} />
<Step key={2} title={'步骤三'} />
<Step key={3} title={'步骤四'} />
</Steps>
</div>
<h2>纵向步骤条</h2>
<div className="vertical-demo">
<h3>不可返回编辑</h3>
<div className="demo-box">
<Steps current={1} showIcon direction="vertical">
<Step key={0} title={'步骤一'} description="这里是说明文案" />
<Step key={1} title={'步骤二'} description="这里是说明文案" />
<Step key={2} title={'步骤三'} description="这里是说明文案" />
<Step key={3} title={'步骤四'} description="这里是说明文案" />
<Step key={4} title={'已完成'} description="这里是说明文案" />
</Steps>
</div>
</div>
<div className="vertical-demo">
<h3>可返回编辑</h3>
<div className="demo-box">
<Steps current={1} direction="vertical" showIcon={false}>
<Step key={0} title={'步骤一'} description="这里是说明文案" />
<Step key={1} title={'步骤二'} description="这里是说明文案" />
<Step key={2} title={'步骤三'} description="这里是说明文案" />
<Step key={3} title={'步骤四'} description="这里是说明文案" />
<Step key={4} title={'已完成'} description="这里是说明文案" />
</Steps>
</div>
</div>


<div className="demo-box">
<Steps
current={1} showIcon
onChange={this.cb.bind(this)} showDetail currentDetail={this.state.c}
>
<Step key={0} title={'步骤一'} >步骤1, 利用回调函数改变currentDetail取值来切换详情面板</Step>
<Step key={1} title={'步骤二'} >步骤2, 利用回调函数改变currentDetail取值来切换详情面板</Step>
<Step key={2} title={'步骤三'} >步骤3, 利用回调函数改变currentDetail取值来切换详情面板</Step>
<Step key={2} title={'步骤三'} status="error" >步骤3, 利用回调函数改变currentDetail取值来切换详情面板</Step>
<Step key={3} title={'步骤四'} >步骤4, 利用回调函数改变currentDetail取值来切换详情面板</Step>
<Step key={4} title={'已完成'} >步骤5
<br />利用回调函数改变currentDetail取值来切换详情面板
Expand All @@ -47,33 +130,21 @@ class Demo extends React.Component {
</Steps>
</div>
<div className="demo-box">
<Steps current={5} showIcon >
<Step key={0} title={'步骤一'} />
<Step key={1} title={'步骤二'} />
<Steps current={3} showIcon >
<Step key={0} editable={true} title={'步骤一'} />
<Step key={1} editable={true} title={'步骤二'} />
<Step key={2} title={'步骤三'} />
<Step key={3} title={'步骤四'} />
<Step key={4} title={'已完成'} />
</Steps>
</div>
<div className="demo-box">
<Steps current={1} showIcon={false}>
<Step key={0} title={'步骤一'} />
<Step key={1} title={'步骤二'} />
<Step key={2} title={'步骤三'} />
<Step key={3} title={'步骤四'} />
<Step key={4} title={'已完成'} >
我是最后一个元素
</Step>
</Steps>
</div>
<h3>横向步骤条(样式二)</h3>
<div className="demo-box">
<Steps current={1} showIcon={false}>
<Step key={0} title={'步骤一'} description="内容文案内容文案内容文案内容文案" />
<Step key={1} title={'步骤二'} description="内容文案内容文案内容文案内容文案" />
<Step key={2} title={'步骤三'} description="内容文案内容文案内容文案内容文案" />
<Step key={3} title={'步骤四'} description="内容文案内容文案内容文案内容文案" />
<Step key={4} title={'已完成'} description="内容文案内容文案内容文案内容文案" />
</Steps>
</div>
<h3>显示时间的步骤条</h3>
Expand All @@ -93,33 +164,9 @@ class Demo extends React.Component {
<Step key={1} title={'步骤二'} description="这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案" />
<Step key={2} title={'步骤三'} description="这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案" />
<Step key={3} title={'步骤四'} description="这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案" />
<Step key={4} title={'已完成'} description="这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案这里是说明文案" />
</Steps>
</div>
<div className="vertical-demo">
<h3>纵向步骤条</h3>
<div className="demo-box">
<Steps current={1} showIcon direction="vertical">
<Step key={0} title={'步骤一'} description="这里是说明文案" />
<Step key={1} title={'步骤二'} description="这里是说明文案" />
<Step key={2} title={'步骤三'} description="这里是说明文案" />
<Step key={3} title={'步骤四'} description="这里是说明文案" />
<Step key={4} title={'已完成'} description="这里是说明文案" />
</Steps>
</div>
</div>
<div className="vertical-demo">
<h3>纵向步骤条(无 icon)</h3>
<div className="demo-box">
<Steps current={1} direction="vertical" showIcon={false}>
<Step key={0} title={'步骤一'} description="这里是说明文案" />
<Step key={1} title={'步骤二'} description="这里是说明文案" />
<Step key={2} title={'步骤三'} description="这里是说明文案" />
<Step key={3} title={'步骤四'} description="这里是说明文案" />
<Step key={4} title={'已完成'} description="这里是说明文案" />
</Steps>
</div>
</div>

</div>
);
}
Expand Down
14 changes: 12 additions & 2 deletions demo/StepsDemo.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ html {
@import '../node_modules/kuma-base/memories/variable.less';
@import '../node_modules/kuma-base/variable.less';
@import '../node_modules/kuma-base/core.less';
@import "../src/Steps.less";
@import '../node_modules/uxcore-kuma/dist/orange.css';
@import '../src/Steps.less';


.vertical-demo {
Expand All @@ -23,5 +24,14 @@ html {
}

h3 {
margin: 10px;
margin-bottom: 30px;
}

.uxcore-steps-demo {
width: 800px;
margin: 50px auto;

.demo-box{
margin: 50px auto;
}
}
112 changes: 57 additions & 55 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,58 @@
{
"name": "uxcore-steps",
"version": "2.0.4",
"description": "uxcore-steps component for uxcore.",
"repository": "https://github.com/uxcore/uxcore-steps.git",
"author": "vincent.bian",
"main": "build/index.js",
"scripts": {
"start": "uxcore-tools run start",
"server": "uxcore-tools run server",
"lint": "uxcore-tools run lint",
"build": "uxcore-tools run build",
"test": "uxcore-tools run test",
"coverage": "uxcore-tools run coverage",
"pub": "uxcore-tools run pub",
"dep": "uxcore-tools run dep",
"tnpm-dep": "uxcore-tools run tnpm-dep",
"chrome": "uxcore-tools run chrome",
"browsers": "uxcore-tools run browsers",
"saucelabs": "uxcore-tools run saucelabs",
"update": "uxcore-tools run update"
},
"bugs": {
"url": "http://github.com/uxcore/uxcore-steps/issues"
},
"keywords": [
"react",
"react-component",
"uxcore-steps",
"Steps"
],
"devDependencies": {
"console-polyfill": "^0.2.2",
"enzyme": "^2.6.0",
"es5-shim": "^4.5.8",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"expect.js": "~0.3.1",
"kuma-base": "1.x",
"object-assign": "^4.1.0",
"react": "0.14.x",
"react-addons-test-utils": "0.14.x",
"react-dom": "0.14.x",
"uxcore-kuma": "*",
"uxcore-tools": "0.2.x"
},
"dependencies": {
"classnames": "^2.1.2",
"object-assign": "^4.0.0"
},
"contributors": [],
"license": "MIT"
}
"name": "uxcore-steps",
"version": "2.0.4",
"description": "uxcore-steps component for uxcore.",
"repository": "https://github.com/uxcore/uxcore-steps.git",
"author": "vincent.bian",
"main": "build/index.js",
"scripts": {
"start": "uxcore-tools run start",
"server": "uxcore-tools run server",
"lint": "uxcore-tools run lint",
"build": "uxcore-tools run build",
"test": "uxcore-tools run test",
"coverage": "uxcore-tools run coverage",
"pub": "uxcore-tools run pub",
"dep": "uxcore-tools run dep",
"tnpm-dep": "uxcore-tools run tnpm-dep",
"chrome": "uxcore-tools run chrome",
"browsers": "uxcore-tools run browsers",
"saucelabs": "uxcore-tools run saucelabs",
"update": "uxcore-tools run update"
},
"bugs": {
"url": "http://github.com/uxcore/uxcore-steps/issues"
},
"keywords": [
"react",
"react-component",
"uxcore-steps",
"Steps"
],
"devDependencies": {
"console-polyfill": "^0.2.2",
"enzyme": "^2.6.0",
"es5-shim": "^4.5.8",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^12.0.0",
"eslint-plugin-import": "^1.16.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.4.1",
"expect.js": "~0.3.1",
"kuma-base": "1.x",
"object-assign": "^4.1.0",
"react": "0.14.x",
"react-addons-test-utils": "0.14.x",
"react-dom": "0.14.x",
"uxcore-kuma": "*",
"uxcore-tools": "0.2.x"
},
"dependencies": {
"classnames": "^2.1.2",
"object-assign": "^4.0.0",
"uxcore-icon": "^0.1.15",
"uxcore-tooltip": "^0.4.5"
},
"contributors": [],
"license": "MIT"
}
Loading

0 comments on commit dae0b9b

Please sign in to comment.