[improvement] Steps: 扩展自定义class (#311)

* [improvement] Steps: extend custom classes

* [improvement] Steps: fix

example/pages/steps/index.wxml

@@ -49,10 +49,18 @@
     </zan-cell-group>
   </zan-panel>
 
-  <zan-panel title="可自定义 class">
-    <zan-cell>
-      <zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
-    </zan-cell>
+  <zan-panel title="自定义 class">
+    <zan-cell-group>
+      <zan-cell cell-class="gray">
+        <zan-steps
+          steps-class="my-class"
+          icon-class="gray"
+          title-class="white"
+          type="horizon"
+          steps="{{steps}}"
+        ></zan-steps>
+      </zan-cell>
+    </zan-cell-group>
   </zan-panel>
 </doc-page>
 

example/pages/steps/index.wxss

@@ -1,6 +1,11 @@
 .my-class {
-  padding: 10px;
+  margin: 20px;
 }
-.my-class .zan-steps__step--done {
-  color: #f44;
+
+.gray {
+  background-color: #ccc !important;
+}
+
+.white {
+  color: #fff !important;
 }

packages/steps/README.md

@@ -13,18 +13,74 @@
     "zan-steps": "path/to/zanui-weapp/dist/steps/index"
   }
 }
+```
 
 ### 代码演示
-在模板中使用 zan-steps 模板，并传入相应数据
+
+#### 基础用法
+
 ```html
 <zan-steps type="horizon" steps="{{steps}}"></zan-steps>
 ```
+
+#### 2步完成
+
+```html
+<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
+```
+
+```js
+steps: [
+  {
+      done: true,
+      current: false,
+      text: '步骤一',
+      desc: '10.01'
+    },
+    {
+      done: false,
+      current: true,
+      text: '步骤二',
+      desc: '10.02'
+    }
+]
+```
+
+#### 有描述的steps
+
+```html
+<zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
+```
+
+#### 垂直方向的steps
+
+```html
+<zan-steps type="vertical" steps="{{steps}}"></zan-steps>
+```
+
+#### 自定义 class
+
+```html
+<zan-steps
+  steps-class="my-class"
+  icon-class="gray"
+  title-class="white"
+  type="horizon"
+  steps="{{steps}}"
+></zan-steps>
+```
+
+
+
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
 | type | steps 的展示状态，可选值为 'horizon', 'vertical' | String | horizon | |
 | hasDesc | 是否展示描述 | Boolean  | false | |
 | steps | 步骤条展示数据 | Array  |  | 必须 |
-| className | 自定义类目，方便自定义显示 | String  | | |
+| steps-class | 自定义类，可改变steps外层样式 | String  | | |
+| icon-class | 自定义类，可改变icon样式 | String  | | |
+| title-class | 自定义类，可改变标题样式 | String  | | |
+| desc-class | 自定义类，可改变描述样式 | String  | | |
 
 steps 数据格式如下：
 ```js

packages/steps/index.js

@@ -1,4 +1,5 @@
 Component({
+  externalClasses: ['steps-class', 'icon-class', 'title-class', 'desc-class'],
   properties: {
     type: {
       type: String,

packages/steps/index.wxml

@@ -1,11 +1,11 @@
-<view class="zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
+<view class="steps-class zan-steps zan-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zan-steps--{{ steps.length }} {{ className }}">
   <view
     wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
     class="zan-steps__step {{ hasDesc ? 'zan-steps__step--db-title' : '' }} {{ index == 0 ? 'zan-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zan-steps__step--last-child' : '' }} {{ step.done ? 'zan-steps__step--done' : '' }} {{ step.current ? 'zan-steps__step--cur' : '' }}"
   >
-    <view class="zan-steps__title">{{ step.text }}</view>
-    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc">{{ step.desc }}</view>
-    <view class="zan-steps__icons">
+    <view class="zan-steps__title title-class">{{ step.text }}</view>
+    <view wx:if="{{ hasDesc && step.desc }}" class="zan-steps__title zan-steps__title--desc desc-class">{{ step.desc }}</view>
+    <view class="zan-steps__icons icon-class">
       <view class="zan-steps__circle"></view>
     </view>
     <view class="zan-steps__line"></view>

packages/steps/wxss/vstep.pcss

@@ -44,7 +44,7 @@
 .zan-steps--vsteps .zan-steps__circle {
   width: 5px;
   height: 5px;
-  background-color: #cacaca;
+  background-color: #e5e5e5;
   border-radius: 10px;
 }