[new feature] CellGroup: add title prop (#1407)

example/pages/cell/index.wxml

@@ -52,6 +52,15 @@
   />
 </demo-block>
 
+<demo-block title="分组标题">
+  <van-cell-group title="分组 1">
+    <van-cell title="单元格" value="内容" />
+  </van-cell-group>
+  <van-cell-group title="分组 2">
+    <van-cell title="单元格" value="内容" />
+  </van-cell-group>
+</demo-block>
+
 <demo-block title="高级用法">
   <van-cell value="内容" icon="shop-o" is-link>
     <view slot="title">

packages/cell-group/index.less

@@ -1 +1,10 @@
 @import '../common/style/var.less';
+
+.van-cell-group {
+  &__title {
+    font-size: 14px;
+    padding: 15px 15px 5px;
+    color: @gray-dark;
+    line-height: 16px;
+  }
+}

packages/cell-group/index.ts

@@ -2,6 +2,7 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
+    title: String,
     border: {
       type: Boolean,
       value: true

packages/cell-group/index.wxml

@@ -1,3 +1,9 @@
+<view
+  wx:if="{{ title }}"
+  class="van-cell-group__title"
+>
+  {{ title }}
+</view>
 <view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
   <slot />
 </view>

packages/cell/README.md

@@ -83,6 +83,19 @@
 />
 ```
 
+#### 分组标题
+
+通过`CellGroup`的`title`属性可以指定分组标题
+
+```html
+<van-cell-group title="分组1">
+  <van-cell title="单元格" value="内容" />
+</van-cell-group>
+<van-cell-group title="分组2">
+  <van-cell title="单元格" value="内容" />
+</van-cell-group>
+```
+
 #### 高级用法
 
 如以上用法不能满足你的需求，可以使用对应的插槽来自定义显示的内容
@@ -116,6 +129,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
+| title | 分组标题 | `String` | `-` |
 | border | 是否显示外边框 | `Boolean` | `true` |
 
 ### CellGroup 外部样式类