From 9d2ad7e092c68eeb7b61aa5b0fe80fc651731cdf Mon Sep 17 00:00:00 2001
From: oConner <1457623475@qq.com>
Date: Tue, 27 Mar 2018 19:52:23 +0800
Subject: [PATCH] =?UTF-8?q?[refactor]=20Panel:=20=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=20(#157)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* panel done 0.0.1

* change read me
---
 packages/Panel/panel.js   | 23 +++++++++++++++++++++++
 packages/Panel/panel.json |  3 +++
 packages/Panel/panel.wxml | 10 ++++++++++
 packages/panel/README.md  | 25 ++++++++++++++++++-------
 packages/panel/index.pcss | 21 +++++++++++----------
 5 files changed, 65 insertions(+), 17 deletions(-)
 create mode 100644 packages/Panel/panel.js
 create mode 100644 packages/Panel/panel.json
 create mode 100644 packages/Panel/panel.wxml

diff --git a/packages/Panel/panel.js b/packages/Panel/panel.js
new file mode 100644
index 00000000..9c724814
--- /dev/null
+++ b/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
+    }
+  }
+})
diff --git a/packages/Panel/panel.json b/packages/Panel/panel.json
new file mode 100644
index 00000000..467ce294
--- /dev/null
+++ b/packages/Panel/panel.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/packages/Panel/panel.wxml b/packages/Panel/panel.wxml
new file mode 100644
index 00000000..9cb5a19f
--- /dev/null
+++ b/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>
diff --git a/packages/panel/README.md b/packages/panel/README.md
index b4d9d426..dc52a66f 100644
--- a/packages/panel/README.md
+++ b/packages/panel/README.md
@@ -1,15 +1,26 @@
-## Panel 面板
+## Panel 面板组件
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
-```css
-@import "path/to/zanui-weapp/dist/index.wxss";
+在 index.json 中引入组件
+```json
+{
+  "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 | - | |
+
+
diff --git a/packages/panel/index.pcss b/packages/panel/index.pcss
index 218e6455..b50505e9 100644
--- a/packages/panel/index.pcss
+++ b/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;
 }