[new feature] Cell: add title-style prop (#3233)

packages/cell/en-US.md

@@ -115,6 +115,7 @@ Vue.use(Cell).use(CellGroup);
 | is-link | Whether to show link icon | `Boolean` | `false` |
 | required | Whether to show required mark | `Boolean` | `false` |
 | arrow-direction | Can be set to `left` `up` `down` | `String` | - |
+| title-style | Title style | `any` | - |
 | title-class | Title className | `any` | - |
 | value-class | Value className | `any` | - |
 | label-class | Label className | `any` | - |

packages/cell/index.tsx

@@ -48,19 +48,14 @@ function Cell(
   );
 
   const Title = showTitle && (
-    <div class={[bem('title'), props.titleClass]}>
+    <div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
       {slots.title ? slots.title() : <span>{title}</span>}
       {Label}
     </div>
   );
 
   const Value = showValue && (
-    <div
-      class={[
-        bem('value', { alone: !slots.title && !title }),
-        props.valueClass
-      ]}
-    >
+    <div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
       {slots.default ? slots.default() : <span>{value}</span>}
     </div>
   );

packages/cell/shared.ts

@@ -5,6 +5,7 @@ export type SharedCellProps = {
   center?: boolean;
   isLink?: boolean;
   required?: boolean;
+  titleStyle?: any;
   titleClass?: any;
   valueClass?: any;
   labelClass?: any;
@@ -19,6 +20,7 @@ export const cellProps = {
   center: Boolean,
   isLink: Boolean,
   required: Boolean,
+  titleStyle: null as any,
   titleClass: null as any,
   valueClass: null as any,
   labelClass: null as any,

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

@@ -11,3 +11,9 @@ exports[`render slot 1`] = `
   </div>Custom Extra
 </div>
 `;
+
+exports[`title-style prop 1`] = `
+<div class="van-cell">
+  <div class="van-cell__title" style="color: red;"><span>title</span></div>
+</div>
+`;

packages/cell/test/index.spec.js

@@ -42,3 +42,16 @@ test('render slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('title-style prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      title: 'title',
+      titleStyle: {
+        color: 'red'
+      }
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/cell/zh-CN.md

@@ -119,6 +119,7 @@ Vue.use(Cell).use(CellGroup);
 | required | 是否显示表单必填星号 | `Boolean` | `false` | - |
 | center | 是否使内容垂直居中 | `Boolean` | `false` | 1.0.3 |
 | arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | 1.1.10 |
+| title-style | 左侧标题额外样式 | `any` | - | 1.6.17 |
 | title-class | 左侧标题额外类名 | `any` | - | 1.4.8 |
 | value-class | 右侧内容额外类名 | `any` | - | 1.4.8 |
 | label-class | 描述信息额外类名 | `any` | - | 1.4.8 |