diff --git a/app.json b/app.json
index e9b7179f..740192e5 100644
--- a/app.json
+++ b/app.json
@@ -15,7 +15,6 @@
"example/steps/index",
"example/card/index",
"example/toast/index",
- "example/vsteps/index",
"example/icon/index",
"example/dialog/index"
],
diff --git a/dist/index.wxss b/dist/index.wxss
index a93c9cca..8cea86dd 100644
--- a/dist/index.wxss
+++ b/dist/index.wxss
@@ -14,5 +14,4 @@
@import "steps/index.wxss";
@import "toast/index.wxss";
@import "toptips/index.wxss";
-@import "vsteps/index.wxss";
@import "icon/index.wxss";
diff --git a/dist/steps/index.wxml b/dist/steps/index.wxml
new file mode 100644
index 00000000..8438c603
--- /dev/null
+++ b/dist/steps/index.wxml
@@ -0,0 +1,14 @@
+
+
+
+ {{ step.text }}
+
+
+
+
+
+
+
diff --git a/dist/steps/index.wxss b/dist/steps/index.wxss
index 2f785ffe..06f71e31 100644
--- a/dist/steps/index.wxss
+++ b/dist/steps/index.wxss
@@ -1,119 +1,6 @@
+@import "wxss/step.wxss";
+@import "wxss/vstep.wxss";
+
.zui-steps {
position: relative;
}
-
-.zui-steps-5 .zui-steps__step {
- width: 25%;
-}
-
-.zui-steps-4 .zui-steps__step {
- width: 33%;
-}
-
-.zui-steps-3 .zui-steps__step {
- width: 50%;
-}
-
-.zui-steps__step {
- position: relative;
- float: left;
- padding-bottom: 20px;
- color: #b1b1b1;
-}
-
-.zui-steps__title {
- display: inline-block;
- transform: translateX(-50%);
- margin-left: 2px;
- font-size: 10px;
-}
-
-.zui-steps__icon {
- position: absolute;
- top: 28px;
- left: -8px;
- padding: 0 8px;
- background-color: #fff;
- z-index: 10;
-}
-
-.zui-steps__circle {
- display: block;
- position: relative;
- width: 5px;
- height: 5px;
- background-color: #e5e5e5;
- border-radius: 50%;
-}
-
-.zui-steps__line {
- position: absolute;
- left: 0px;
- top: 30px;
- width: 100%;
- height: 1px;
- background-color: #e5e5e5;
-}
-
-
-/* 已完成的steps */
-.zui-steps__step--done {
- color: #333;
-}
-
-.zui-steps__step--done .zui-steps__line {
- background-color: #06bf04;
-}
-
-.zui-steps__step--done .zui-steps__circle {
- width: 5px;
- height: 5px;
- background-color: #09bb07;
-}
-
-/* 正在进行中的steps */
-.zui-steps__step--cur .zui-steps__icon {
- top: 24px;
-}
-
-.zui-steps__step--cur .zui-steps__circle {
- width: 13px;
- height: 13px;
- background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
- background-size: 13px 13px;
-}
-
-.zui-steps__step--cur .zui-steps__title {
- margin-left: 6px;
-}
-
-.zui-steps__step--cur .zui-steps__line {
- background-color: #e5e5e5;
-}
-
-/* 各种不同位置的 */
-.zui-steps__step--first-child .zui-steps__title {
- margin-left: 0;
- transform: none;
-}
-
-.zui-steps__step--last-child {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- text-align: right;
-}
-
-.zui-steps__step--last-child .zui-steps__title {
- transform: none;
-}
-
-.zui-steps__step--last-child .zui-steps__icon {
- left: auto;
- right: -6px;
-}
-
-.zui-steps__step--last-child .zui-steps__line {
- display: none;
-}
diff --git a/dist/steps/wxss/step.wxss b/dist/steps/wxss/step.wxss
new file mode 100644
index 00000000..e6d79ed0
--- /dev/null
+++ b/dist/steps/wxss/step.wxss
@@ -0,0 +1,115 @@
+.zui-steps--steps.zui-steps--5 .zui-steps__step {
+ width: 25%;
+}
+
+.zui-steps--steps.zui-steps--4 .zui-steps__step {
+ width: 33%;
+}
+
+.zui-steps--steps.zui-steps--3 .zui-steps__step {
+ width: 50%;
+}
+
+.zui-steps--steps .zui-steps__step {
+ position: relative;
+ float: left;
+ padding-bottom: 20px;
+ color: #b1b1b1;
+}
+
+.zui-steps--steps .zui-steps__title {
+ display: inline-block;
+ transform: translateX(-50%);
+ margin-left: 2px;
+ font-size: 10px;
+}
+
+.zui-steps--steps .zui-steps__icons {
+ position: absolute;
+ top: 28px;
+ left: -8px;
+ padding: 0 8px;
+ background-color: #fff;
+ z-index: 10;
+}
+
+.zui-steps--steps .zui-steps__circle {
+ display: block;
+ position: relative;
+ width: 5px;
+ height: 5px;
+ background-color: #e5e5e5;
+ border-radius: 50%;
+}
+
+.zui-steps--steps .zui-steps__line {
+ position: absolute;
+ left: 0px;
+ top: 30px;
+ width: 100%;
+ height: 1px;
+ background-color: #e5e5e5;
+}
+
+
+/* 已完成的steps */
+.zui-steps--steps .zui-steps__step--done {
+ color: #333;
+}
+
+.zui-steps--steps .zui-steps__step--done .zui-steps__line {
+ background-color: #06bf04;
+}
+
+.zui-steps--steps .zui-steps__step--done .zui-steps__circle {
+ width: 5px;
+ height: 5px;
+ background-color: #09bb07;
+}
+
+/* 正在进行中的steps */
+.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
+ top: 24px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
+ width: 13px;
+ height: 13px;
+ background-image: url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
+ background-size: 13px 13px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__title {
+ margin-left: 6px;
+}
+
+.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
+ background-color: #e5e5e5;
+}
+
+/* 各种不同位置的 */
+.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
+ margin-left: 0;
+ transform: none;
+}
+
+.zui-steps--steps .zui-steps__step--last-child {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ text-align: right;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
+ transform: none;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
+ left: auto;
+ right: -6px;
+}
+
+.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
+ display: none;
+}
diff --git a/dist/vsteps/index.wxss b/dist/steps/wxss/vstep.wxss
similarity index 50%
rename from dist/vsteps/index.wxss
rename to dist/steps/wxss/vstep.wxss
index cb964d29..06f4104d 100644
--- a/dist/vsteps/index.wxss
+++ b/dist/steps/wxss/vstep.wxss
@@ -1,35 +1,34 @@
-
-.zui-vsteps {
- position: relative;
- padding: 15px;
+.zui-steps--vsteps {
color: #999;
font-size: 14px;
}
-.zui-vsteps::after {
- left: 42px;
+.zui-steps--vsteps .zui-steps__step {
+ position: relative;
+ padding: 15px 0;
}
-.zui-vsteps__step--done {
+.zui-steps--vsteps .zui-steps__step--done {
color: #44BB00;
}
-.zui-vsteps__line {
+.zui-steps--vsteps .zui-steps__line {
position: absolute;
top: 0;
bottom: 0;
- left: 22px;
+ left: 7px;
width: 1px;
background-color: #e5e5e5;
}
-.zui-vsteps__title {
+.zui-steps--vsteps .zui-steps__title {
+ line-height: 20px;
padding-left: 27px;
}
-.zui-vsteps__icons {
+.zui-steps--vsteps .zui-steps__icons {
position: absolute;
- left: 22px;
+ left: 7px;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
@@ -37,43 +36,43 @@
background-color: #fff;
}
-.zui-vsteps__circle {
+.zui-steps--vsteps .zui-steps__circle {
width: 5px;
height: 5px;
background-color: #cacaca;
border-radius: 10px;
}
-.zui-vsteps__step--done .zui-vsteps__circle {
+.zui-steps--vsteps .zui-steps__step--done .zui-steps__circle {
width: 13px;
height: 13px;
- color: #09bb07;
- background-color: transparent;
+ background: transparent url("https://b.yzcdn.cn/v2/image/wap/success_small@2x.png");
+ background-size: 13px 13px;
border-radius:0;
}
-.zui-vsteps__icon--active {
+.zui-steps--vsteps .zui-steps__icon--active {
width: 13px;
height: 13px;
}
-.zui-vsteps--first-child .zui-vsteps__title::before {
+.zui-steps--vsteps .zui-steps__step--first-child .zui-steps__title::before {
content: '';
position: absolute;
top: 0;
bottom: 50%;
- left: 22px;
+ left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;
}
-.zui-vsteps--last-child .zui-vsteps__title::before {
+.zui-steps--vsteps .zui-steps__step--last-child .zui-steps__title::before {
content: '';
position: absolute;
top: 50%;
bottom: 0%;
- left: 22px;
+ left: 7px;
width: 1px;
background-color: #fff;
z-index: 1;
diff --git a/example/dashboard/index.js b/example/dashboard/index.js
index 186ba851..920627f1 100644
--- a/example/dashboard/index.js
+++ b/example/dashboard/index.js
@@ -42,9 +42,6 @@ Page({
}, {
name: 'Steps',
path: '/example/steps/index'
- }, {
- name: 'Vsteps',
- path: '/example/vsteps/index'
}, {
name: 'Tab',
path: '/example/tab/index'
diff --git a/example/steps/index.js b/example/steps/index.js
index 99e7458d..789e2d02 100644
--- a/example/steps/index.js
+++ b/example/steps/index.js
@@ -2,6 +2,23 @@ var app = getApp()
Page({
data: {
+ steps: [
+ {
+ current: false,
+ done: true,
+ text: '步骤一'
+ },
+ {
+ done: true,
+ current: true,
+ text: '步骤二'
+ },
+ {
+ done: false,
+ current: false,
+ text: '步骤三'
+ }
+ ]
},
onLoad: function () {
diff --git a/example/steps/index.wxml b/example/steps/index.wxml
index 58e5b6de..b047bff8 100644
--- a/example/steps/index.wxml
+++ b/example/steps/index.wxml
@@ -1,69 +1,25 @@
+
+
-
-
- 步骤一
-
-
-
-
-
-
- 步骤二
-
-
-
-
-
-
- 步骤三
-
-
-
-
-
-
+
-
-
- 步骤一
-
-
-
-
-
-
- 步骤二
-
-
-
-
-
-
- 步骤三
-
-
-
-
-
-
- 步骤四
-
-
-
-
-
-
+
+
+
+ 可自定义class
+
+
+
+
diff --git a/example/steps/index.wxss b/example/steps/index.wxss
new file mode 100644
index 00000000..cff4db6e
--- /dev/null
+++ b/example/steps/index.wxss
@@ -0,0 +1,3 @@
+.my-class {
+ padding: 5px 15px;
+}
diff --git a/example/vsteps/index.js b/example/vsteps/index.js
deleted file mode 100644
index 99e7458d..00000000
--- a/example/vsteps/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-var app = getApp()
-
-Page({
- data: {
- },
-
- onLoad: function () {
-
- },
-
- onShow: function() {
- },
-})
diff --git a/example/vsteps/index.wxml b/example/vsteps/index.wxml
deleted file mode 100644
index 946d3445..00000000
--- a/example/vsteps/index.wxml
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
- 买家退款 (2016-03-21 19:20:20)
-
-
-
-
-
-
- 卖家同意 (2016-03-22 21:20:20)
-
-
-
-
-
-
- 卖家退款 (2016-03-23 20:20:20)
-
-
-
-
-
-
-