diff --git a/example/app.wxss b/example/app.wxss index ef0a11f7..6c09fd3b 100644 --- a/example/app.wxss +++ b/example/app.wxss @@ -11,7 +11,7 @@ page { } .demo-margin-right { - margin-right: 15px; + margin-right: 10px; } .demo-margin-bottom { diff --git a/example/pages/panel/index.json b/example/pages/panel/index.json index 5f992a1c..30817633 100644 --- a/example/pages/panel/index.json +++ b/example/pages/panel/index.json @@ -1,6 +1,8 @@ { "navigationBarTitleText": "Panel 面板", "usingComponents": { - "van-panel": "../../dist/panel/index" + "demo-block": "../../components/demo-block/index", + "van-panel": "../../dist/panel/index", + "van-button": "../../dist/button/index" } } diff --git a/example/pages/panel/index.wxml b/example/pages/panel/index.wxml index 803c645b..1f46e000 100644 --- a/example/pages/panel/index.wxml +++ b/example/pages/panel/index.wxml @@ -1,11 +1,15 @@ - - PANEL 内容区域 - + + + 内容 + + - - 带有标题的 PANEL - - - - 无边框的panel - + + + 内容 + + 按钮 + 按钮 + + + diff --git a/example/pages/panel/index.wxss b/example/pages/panel/index.wxss index 1d35f5af..2e88dce3 100644 --- a/example/pages/panel/index.wxss +++ b/example/pages/panel/index.wxss @@ -1,4 +1,8 @@ -.panel-example { - display: block; - margin-top: 15px; +.content { + padding: 20px; + font-size: 16px; +} + +.footer { + text-align: right; } diff --git a/packages/button/index.pcss b/packages/button/index.pcss index 78b450f5..26d8774f 100644 --- a/packages/button/index.pcss +++ b/packages/button/index.pcss @@ -10,6 +10,7 @@ box-sizing: border-box; font-size: 16px; text-align: center; + vertical-align: middle; -webkit-appearance: none; -webkit-text-size-adjust: 100%; diff --git a/packages/panel/README.md b/packages/panel/README.md index 90290d0d..da646b65 100644 --- a/packages/panel/README.md +++ b/packages/panel/README.md @@ -1,25 +1,58 @@ -## Panel 面板组件 +## Panel 面板 ### 使用指南 在 index.json 中引入组件 ```json -{ - "usingComponents": { - "van-panel": "path/to/vant-weapp/dist/panel/index" - } +"usingComponents": { + "van-panel": "path/to/vant-weapp/dist/panel/index" } ``` ### 代码演示 -Panel 提供了一块白色的展示区域，使用方式如下 + +#### 基础用法 +面板只是一个容器，里面可以放入自定义的内容 + ```html - + 内容 ``` -| 参数 | 说明 | 类型 | 默认值 | 必须 | -|-----------|-----------|-----------|-------------|-------------| -| title | panel的标题 | String | - | | -| hide-border | 内容区隐藏边框 | Boolean | - | | +#### 高级用法 +使用`slot`自定义内容 +```html + + 内容 + + 按钮 + 按钮 + + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| title | 标题 | `String` | - | +| desc | 描述 | `String` | - | +| status | 状态 | `String` | - | +| use-footer-slot | 是否使用 footer slot | `Boolean` | `false` | + +### Slot + +| 名称 | 说明 | +|-----------|-----------| +| - | 自定义内容 | +| header | 自定义 header，如果设置了`title`、`desc`、`status`属性则不生效 | +| footer | 自定义 footer，需要设置 `use-footer-slot`属性 | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| header-class | 头部样式类 | +| footer-class | 底部样式类 | diff --git a/packages/panel/index.js b/packages/panel/index.js index 6778cae3..7d77342c 100644 --- a/packages/panel/index.js +++ b/packages/panel/index.js @@ -1,23 +1,18 @@ Component({ - /** - * 组件的属性列表 - * 用于组件自定义设置 - */ + externalClasses: [ + 'custom-class', + 'footer-class' + ], + + options: { + multipleSlots: true + }, + properties: { - // 标题 - title: { - type: String, - value: '' - }, - // 内容区顶部是否取消10像素的间距 - hideTop: { - type: Boolean, - value: false - }, - // 内容区顶部是否取消边框 - hideBorder: { - type: Boolean, - value: false - } + desc: String, + title: String, + status: String, + headerClass: String, + useFooterSlot: Boolean } }); diff --git a/packages/panel/index.json b/packages/panel/index.json index 467ce294..0e5425cd 100644 --- a/packages/panel/index.json +++ b/packages/panel/index.json @@ -1,3 +1,6 @@ { - "component": true + "component": true, + "usingComponents": { + "van-cell": "../cell/index" + } } diff --git a/packages/panel/index.pcss b/packages/panel/index.pcss index 2d951fe7..d4231680 100644 --- a/packages/panel/index.pcss +++ b/packages/panel/index.pcss @@ -1,30 +1,13 @@ -@import "../common/_mixins"; +@import '../helper/index.pcss'; .van-panel { - position: relative; - overflow: hidden; -} + background: $white; -.van-panel__title { - font-size: 14px; - line-height: 1; - color: #999; - padding: 20px 15px 10px 15px; -} + &__header-value { + color: $red; + } -.van-panel__content { - position: relative; - background: #fff; - overflow: hidden; - &::after { - @mixin hairline; - border-top-width: 1px; - border-bottom-width: 1px; - } -} - -.van-panel--without-border { - &::after { - border: 0 none; + &__footer { + padding: 10px 15px; } } diff --git a/packages/panel/index.wxml b/packages/panel/index.wxml index 23121dc5..ee03ce18 100644 --- a/packages/panel/index.wxml +++ b/packages/panel/index.wxml @@ -1,10 +1,19 @@ - - {{ title }} - - + + + + + + + + + +