[refactor] Panel: 升级到自定义组件 (#157)

* panel done 0.0.1

* change read me

packages/Panel/panel.js

@@ -0,0 +1,23 @@
+Component({
+  /**
+   * 组件的属性列表
+   * 用于组件自定义设置
+   */
+  properties: {
+    // 标题
+    title: {
+      type: String,
+      value: '标题'
+    },
+    // 内容区顶部是否取消10像素的间距
+    hideTop :{
+      type : Boolean ,
+      value : false
+    },
+    // 内容区顶部是否取消边框
+    hideBorder :{
+      type : Boolean ,
+      value : false
+    }
+  }
+})

packages/Panel/panel.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/Panel/panel.wxml

@@ -0,0 +1,10 @@
+<view class="zan-panel  {{ hideTop ? 'zan-panel--without-margin-top' : '' }}">
+  <view
+    wx:if="{{ title }}"
+    class="zan-panel__title">{{ title }}</view>
+  <view
+    class="zan-panel__content {{ hideBorder ? 'zan-panel--without-border' : '' }}"
+  >
+    <slot></slot>
+  </view>
+</view>

packages/panel/README.md

@@ -1,15 +1,26 @@
-## Panel 面板
+## Panel 面板组件
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+{
+  "usingComponents": {
+    " zan-panel": "/packages/Panel/panel"
+  }
+}
 ```
 
 ### 代码演示
-Panel 提供了一块白色的展示区域，直接在需要的元素上加上 zan-panel 类即可，使用方式如下
+Panel 提供了一块白色的展示区域，使用方式如下
 ```html
-<view class="zan-panel">
+<zan-panel title='我是标题'>
   <view>内容</view>
-</view>
+</zan-panel>
 ```
+| 参数       | 说明      | 类型       | 默认值       | 必须      |
+|-----------|-----------|-----------|-------------|-------------|
+| title | panel的标题 | String | - | |
+| hide-top | 隐藏顶部边框 | Boolean | - | |
+| hide-border | 内容区隐藏边框 | Boolean | - | |
+
+

packages/panel/index.pcss

@@ -2,10 +2,19 @@
 
 .zan-panel {
   position: relative;
-  background: #fff;
   margin-top: 10px;
-  overflow: hidden;
+}
 
+.zan-panel__title {
+  font-size: 14px;
+  line-height: 1;
+  color: #999;
+  padding: 20px 15px 10px 15px;
+}
+
+.zan-panel__content {
+  background: #fff;
+  overflow: hidden;
   &::after {
     @mixin hairline;
     border-top-width: 1px;
@@ -13,14 +22,6 @@
   }
 }
 
-.zan-panel-title {
-  font-size: 14px;
-  line-height: 1;
-  color: #999;
-  padding: 20px 15px 0 15px;
-}
-
-
 .zan-panel--without-margin-top {
   margin-top: 0;
 }