[improvement] 增加部分组件自定义样式类，方便自定义样式 (#352)

* 增加自定义样式类，并开放部分，在文档上体现

* 增加 cell 外部样式类说明

* 增加自定义样式类

example/pages/switch/index.wxml

@@ -18,4 +18,10 @@
     </zan-cell>
   </zan-panel>
 
+  <zan-panel title='自定义高亮样式'>
+    <zan-cell>
+      <zan-switch theme-class="switch-theme" disabled="{{ false }}" checked/>
+    </zan-cell>
+  </zan-panel>
+
 </doc-page>

example/pages/switch/index.wxss

@@ -1,6 +1,5 @@
-.zan-panel {
-  padding: 10px;
-}
-.zan-switch {
-  margin-right: 8px;
+
+.switch-theme {
+  background: #f44 !important;
+  border-color: #f44 !important;
 }

packages/btn/index.js

@@ -1,7 +1,7 @@
 const nativeButtonBehavior = require('./native-button-behaviors');
 
 Component({
-  externalClasses: ['custom-class'],
+  externalClasses: ['custom-class', 'theme-class'],
   behaviors: [nativeButtonBehavior],
   relations: {
     '../btn-group/index': {

packages/btn/index.wxml

@@ -1,5 +1,5 @@
 <button
-  class="custom-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  class="custom-class theme-class zan-btn {{ inGroup ? 'zan-btn--group' : '' }} {{ isLast ? 'zan-btn--last' : '' }} {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
   disabled="{{ disabled }}"
   hover-class="button-hover"
   open-type="{{ openType }}"

packages/capsule/index.js

@@ -1,4 +1,5 @@
 Component({
+  externalClasses: ['custom-class'],
   /**
    * 组件的属性列表
    * 用于组件自定义设置

packages/capsule/index.wxml

@@ -1,4 +1,4 @@
-<view class="zan-capsule zan-capsule--{{type}}">
+<view class="custom-class zan-capsule zan-capsule--{{type}}">
   <block wx:if="{{color}}">
     <view
       class="zan-capsule__left"

packages/card/README.md

@@ -53,3 +53,9 @@
 | num | 商品数量 | Number | -
 | status | 商品状态 | String | -
 | useDetailSlot | 是否使用detail-slot（true时需要添加对应slot） | Boolean | `false`
+
+### 外部样式类
+| 类名       | 说明      |
+|-----------|-----------|
+| card-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| thumb-class | 左侧图片自定义样式类，可以通过这个修改图片的展示大小形式 |

packages/card/index.js

@@ -3,7 +3,7 @@ Component({
     multipleSlots: true
   },
 
-  externalClasses: ['card-class'],
+  externalClasses: ['card-class', 'thumb-class'],
 
   properties: {
     useThumbSlot: {

packages/card/index.wxml

@@ -1,7 +1,7 @@
-<view class="zan-card card-class">
+<view class="card-class zan-card">
   <!-- 左侧图片 -->
   
-  <view class="zan-card__thumb">
+  <view class="thumb-class zan-card__thumb">
     <image class="zan-card__img"
       src="{{ thumb }}"
       mode="aspectFit"

packages/cell/README.md

@@ -61,3 +61,8 @@
 | 默认            | 否          | 无   | 左侧除了 `title`，`label` 外的自定义 wxml 内容                              |
 | icon          | 否          | 无   | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
 | footer          | 否          | 无   | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
+
+### 外部样式类
+| 类名       | 说明      |
+|-----------|-----------|
+| cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |

packages/cell/index.wxml

@@ -1,6 +1,7 @@
 <view 
   catchtap="cellTap"
-  class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}">
+  class="cell-class zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}"
+>
 
   <view class="zan-cell__icon">
     <slot name="icon"></slot>

packages/checkbox/index.wxml

@@ -1,5 +1,5 @@
 <view
-  class="zan-checkbox checkbox-class {{ isInGroup ? 'zan-checkbox__item' : ''}} {{ type === 'list' ? 'zan-checkbox__list-item' : ''}}"
+  class="checkbox-class zan-checkbox {{ isInGroup ? 'zan-checkbox__item' : ''}} {{ type === 'list' ? 'zan-checkbox__list-item' : ''}}"
   bindtap="{{ labelDisabled ? '' : 'handleClick' }}"
   data-id="test"
   >

packages/switch/README.md

@@ -49,3 +49,9 @@ Page({
 | 事件名称       | 说明      | 回调参数       |
 |-----------|-----------|-----------|
 | change | 当绑定值变化时触发的事件 | event对象和数据对象（包含loading和checked） |
+
+### 外部样式类
+| 类名       | 说明      |
+|-----------|-----------|
+| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |

packages/switch/index.js

@@ -1,4 +1,6 @@
 Component({
+  externalClasses: ['custom-class', 'theme-class'],
+
   properties: {
     checked: {
       type: Boolean,

packages/switch/index.wxml

@@ -1,5 +1,5 @@
 <view
-  class="zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
+  class="custom-class theme-class zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
   checked="{{ checked }}"
   loading="{{ loading }}"
   disabled="{{ disabled }}"

packages/tag/README.md

@@ -43,3 +43,9 @@ tag禁用状态
 | type    | String  | 否       | 空 | tag类型，值有primary、warn、danger |
 | plain   | Boolean | 否       | false | tag是否镂空，默认为false |
 | disabled | Boolean | 否      | false | tag是否禁用，默认为false |
+
+### 外部样式类
+| 类名       | 说明      |
+|-----------|-----------|
+| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
+| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |

packages/tag/index.js

@@ -1,4 +1,6 @@
 Component({
+  externalClasses: ['custom-class', 'theme-class'],
+
   properties: {
     type: {
       type: String,

packages/tag/index.wxml

@@ -1,6 +1,6 @@
 
 <view 
-  class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
+  class="custom-class theme-class zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
 >
   <slot></slot>
 </view>