blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

[new feature] CellGroup: cell-group组件支持显示上下边框

Browse Source
This commit is contained in:
rex 2018-07-27 15:46:17 +08:00 committed by neverland
parent e5743a2051
commit dcf78507be
5 changed files with 62 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
example/pages/cell/index.wxml
View File

@ -1,16 +1,16 @@
<doc-page title="CELL" without-padding>
<zan-panel class="cell-panel-demo">
<zan-cell-group border class="cell-panel-demo">
<zan-cell title="单行列表" bindtap="handleTap"></zan-cell>
</zan-panel>
</zan-cell-group>
<zan-panel class="cell-panel-demo">
<zan-cell-group border class="cell-panel-demo">
<zan-cell title="单行列表" value="详细信息"></zan-cell>
</zan-panel>
</zan-cell-group>
<zan-panel class="cell-panel-demo">
<zan-cell-group border class="cell-panel-demo">
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
</zan-panel>
</zan-cell-group>
<zan-panel class="cell-panel-demo" title="带 icon 的 cell">
<zan-cell title="单行列表" value="详细信息">
@ -32,14 +32,14 @@
<zan-cell title="只显示箭头" is-link></zan-cell>
</zan-panel>
<zan-panel class="cell-panel-demo">
<zan-cell-group border class="cell-panel-demo">
<zan-cell
title="跳转到首页"
is-link
url="/pages/dashboard/index"
bindtap="handleTap"
></zan-cell>
</zan-panel>
</zan-cell-group>
<zan-panel class="cell-panel-demo" title="cell 组">
<zan-cell-group>

8
packages/cell-group/index.js
View File

@ -1,11 +1,15 @@
const CELL_PATH = '../cell/index';
const FIELD_PATH = '../field/index'
const FIELD_PATH = '../field/index';
Component({
properties: {
titleWidth: {
type: Number,
value: null
},
border: {
type: Boolean,
value: false
}
},
relations: {
@ -36,7 +40,7 @@ Component({
},
data: {
elementUpdateTimeout: 0
elementUpdateTimeout: 0
},
methods: {

13
packages/cell-group/index.pcss
View File

@ -1,3 +1,14 @@
@import "../common/_mixins";
.cell-group {
position: relative;
background-color: #fff;
}
overflow: hidden;
}
.cell-group--with-border::after {
@mixin hairline;
border-top-width: 1px;
border-bottom-width: 1px;
}

4
packages/cell-group/index.wxml
View File

@ -1,3 +1,3 @@
<view class="cell-group">
<view class="cell-group {{ border ? 'cell-group--with-border' : '' }}">
<slot></slot>
</view>
</view>

61
packages/cell/README.md
View File

@ -15,33 +15,6 @@
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
```
#### cell 组使用示例
多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
```json
{
"usingComponents": {
"zan-cell": "path/to/zanui-weapp/dist/cell/index",
"zan-cell-group": "path/to/zanui-weapp/dist/cell-group/index"
}
}
```
`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
```wxml
<zan-cell-group title-width="90">
<zan-cell title="只显示箭头" is-link></zan-cell>
<zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
<zan-cell title="表单">
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
</zan-cell>
<zan-cell title="开关">
<switch slot="footer" checked/>
</zan-cell>
</zan-cell-group>
```
### 属性与事件
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
@ -69,3 +42,37 @@
|-----------|-----------|
| cell-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
| title-class | title区域自定义样式 |
#### cell 组使用示例
多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
```json
{
"usingComponents": {
"zan-cell": "path/to/zanui-weapp/dist/cell/index",
"zan-cell-group": "path/to/zanui-weapp/dist/cell-group/index"
}
}
```
`cell-group`提供`title-width`控制组内整体 cell 的 title 区域宽度
```wxml
<zan-cell-group border title-width="90">
<zan-cell title="只显示箭头" is-link></zan-cell>
<zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
<zan-cell title="表单">
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
</zan-cell>
<zan-cell title="开关">
<switch slot="footer" checked/>
</zan-cell>
</zan-cell-group>
```
### 属性与事件
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
| ---------- | ------- | -------- | ----- | ---------------- |
| titleWidth | Number | 否 | 无 | title宽度 |
| border | Boolean | 否 | false | 是否显示上下边框 |