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

packages/cell-group/index.less

@@ -2,4 +2,11 @@
 
 .van-cell-group {
   background-color: @white;
+
+  &__title {
+    font-size: 14px;
+    padding: 15px 15px 5px;
+    color: @gray-dark;
+    line-height: 16px;
+  }
 }

packages/cell-group/index.tsx

@@ -6,6 +6,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
 export type CellGroupProps = {
+  title?: string;
   border: boolean
 };
 
@@ -17,7 +18,7 @@ function CellGroup(
   slots: DefaultSlots,
   ctx: RenderContext<CellGroupProps>
 ) {
-  return (
+  const Group = (
     <div
       class={[bem(), { 'van-hairline--top-bottom': props.border }]}
       {...inherit(ctx, true)}
@@ -25,9 +26,21 @@ function CellGroup(
       {slots.default && slots.default()}
     </div>
   );
+
+  if (props.title) {
+    return (
+      <div>
+        <div class={bem('title')}>{props.title}</div>
+        {Group}
+      </div>
+    );
+  }
+
+  return Group;
 }
 
 CellGroup.props = {
+  title: String,
   border: {
     type: Boolean,
     default: true

packages/cell/demo/index.vue

@@ -71,6 +71,21 @@
       />
     </demo-block>
 
+    <demo-block :title="$t('groupTitle')">
+      <van-cell-group :title="`${$t('group')} 1`">
+        <van-cell
+          :title="$t('cell')"
+          :value="$t('content')"
+        />
+      </van-cell-group>
+      <van-cell-group :title="`${$t('group')} 2`">
+        <van-cell
+          :title="$t('cell')"
+          :value="$t('content')"
+        />
+      </van-cell-group>
+    </demo-block>
+
     <demo-block :title="$t('advancedUsage')">
       <van-cell
         :value="$t('content')"
@@ -107,6 +122,8 @@ export default {
       showIcon: '展示图标',
       showArrow: '展示箭头',
       largeSize: '单元格大小',
+      group: '分组',
+      groupTitle: '分组标题',
       router: '页面跳转'
     },
     'en-US': {
@@ -115,6 +132,8 @@ export default {
       showIcon: 'Left Icon',
       showArrow: 'Link',
       largeSize: 'Size',
+      group: 'Group',
+      groupTitle: 'Group Title',
       router: 'Router'
     }
   }

packages/cell/en-US.md

@@ -62,6 +62,17 @@ Vue.use(Cell).use(CellGroup);
 </van-cell-group>
 ```
 
+#### Group Title
+
+```html
+<van-cell-group title="Group 1">
+  <van-cell title="Cell title" value="Content" />
+</van-cell-group>
+<van-cell-group title="Group 2">
+  <van-cell title="Cell title" value="Content" />
+</van-cell-group>
+```
+
 #### Advanced Usage
 
 ```html
@@ -83,6 +94,7 @@ Vue.use(Cell).use(CellGroup);
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| title | Group title | `String` | - |
 | border | Whether to show outer border | `Boolean` | `true` |
 
 ### Cell API

packages/cell/test/__snapshots__/demo.spec.js.snap

@@ -66,6 +66,26 @@ exports[`renders demo correctly 1`] = `
         <!----></i>
     </div>
   </div>
+  <div>
+    <div>
+      <div class="van-cell-group__title">分组 1</div>
+      <div class="van-cell-group van-hairline--top-bottom">
+        <div class="van-cell">
+          <div class="van-cell__title"><span>单元格</span></div>
+          <div class="van-cell__value"><span>内容</span></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="van-cell-group__title">分组 2</div>
+      <div class="van-cell-group van-hairline--top-bottom">
+        <div class="van-cell">
+          <div class="van-cell__title"><span>单元格</span></div>
+          <div class="van-cell__value"><span>内容</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-shop-o van-cell__left-icon">
         <!----></i>

packages/cell/zh-CN.md

@@ -64,6 +64,19 @@ Vue.use(Cell).use(CellGroup);
 <van-cell title="单元格" is-link to="index" />
 ```
 
+#### 分组标题
+
+通过`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>
+```
+
 #### 高级用法
 
 如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
@@ -85,6 +98,7 @@ Vue.use(Cell).use(CellGroup);
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
+| title | 分组标题 | `String` | `-` | 1.6.9 |
 | border | 是否显示外边框 | `Boolean` | `true` | - |
 
 ### Cell API