From 3d84598cbd95c4e49b770f3d2ef893de54a26c9c Mon Sep 17 00:00:00 2001 From: nemo-shen Date: Sun, 18 Jul 2021 19:58:34 +0800 Subject: [PATCH] feat(Cell): cell-group add inset prop (#9055) * feat(Cell): cell-group add inset prop * style(CellGroup): prettier * docs(Cell): format doc --- src/cell-group/index.less | 10 ++ src/cell-group/index.tsx | 9 +- src/cell/README.md | 103 ++++++++++-------- src/cell/README.zh-CN.md | 53 +++++---- src/cell/demo/index.vue | 9 ++ src/cell/test/__snapshots__/demo.spec.js.snap | 14 +++ src/style/var.less | 3 + 7 files changed, 131 insertions(+), 70 deletions(-) diff --git a/src/cell-group/index.less b/src/cell-group/index.less index bc42a8bea..08d4552c5 100644 --- a/src/cell-group/index.less +++ b/src/cell-group/index.less @@ -3,10 +3,20 @@ .van-cell-group { background-color: @cell-group-background-color; + &--inset { + margin: @cell-group-inset-padding; + overflow: hidden; + border-radius: @cell-group-inset-border-radius; + } + &__title { padding: @cell-group-title-padding; color: @cell-group-title-color; font-size: @cell-group-title-font-size; line-height: @cell-group-title-line-height; + + &--inset { + padding: @cell-group-inset-title-padding; + } } } diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx index 44e2368d7..860b39f11 100644 --- a/src/cell-group/index.tsx +++ b/src/cell-group/index.tsx @@ -9,6 +9,7 @@ import { DefaultSlots, ScopedSlot } from '../utils/types'; export type CellGroupProps = { title?: string; + inset: boolean; border: boolean; }; @@ -26,7 +27,10 @@ function CellGroup( ) { const Group = (
{slots.default?.()} @@ -36,7 +40,7 @@ function CellGroup( if (props.title || slots.title) { return (
-
+
{slots.title ? slots.title() : props.title}
{Group} @@ -49,6 +53,7 @@ function CellGroup( CellGroup.props = { title: String, + inset: Boolean, border: { type: Boolean, default: true, diff --git a/src/cell/README.md b/src/cell/README.md index 5b393619f..bdaa87753 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -21,6 +21,15 @@ Vue.use(CellGroup); ``` +### Inset Grouped + +```html + + + + +``` + ### Size ```html @@ -129,27 +138,27 @@ Vue.use(CellGroup); ### Cell Props -| Attribute | Description | Type | Default | -| --- | --- | --- | --- | -| title | Title | _number \| string_ | - | -| value | Right text | _number \| string_ | - | -| label | Description below the title | _string_ | - | -| size | Size，can be set to `large` | _string_ | - | -| icon | Left Icon | _string_ | - | -| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | -| border | Whether to show inner border | _boolean_ | `true` | -| center | Whether to center content vertically | _boolean_ | `true` | -| url | Link URL | _string_ | - | -| to | Target route of the link, same as to of vue-router | _string \| object_ | - | -| replace | If true, the navigation will not leave a history record | _boolean_ | `false` | -| clickable | Whether to show click feedback when clicked | _boolean_ | `null` | -| 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_ | `right` | -| title-style | Title style | _any_ | - | -| title-class | Title className | _any_ | - | -| value-class | Value className | _any_ | - | -| label-class | Label className | _any_ | - | +| Attribute | Description | Type | Default | +| -------------------- | ------------------------------------------------------- | ------------------ | ---------- | +| title | Title | _number \| string_ | - | +| value | Right text | _number \| string_ | - | +| label | Description below the title | _string_ | - | +| size | Size，can be set to `large` | _string_ | - | +| icon | Left Icon | _string_ | - | +| icon-prefix `v2.5.3` | Icon className prefix | _string_ | `van-icon` | +| border | Whether to show inner border | _boolean_ | `true` | +| center | Whether to center content vertically | _boolean_ | `true` | +| url | Link URL | _string_ | - | +| to | Target route of the link, same as to of vue-router | _string \| object_ | - | +| replace | If true, the navigation will not leave a history record | _boolean_ | `false` | +| clickable | Whether to show click feedback when clicked | _boolean_ | `null` | +| 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_ | `right` | +| title-style | Title style | _any_ | - | +| title-class | Title className | _any_ | - | +| value-class | Value className | _any_ | - | +| label-class | Label className | _any_ | - | ### Cell Events @@ -179,29 +188,29 @@ Vue.use(CellGroup); How to use: [Custom Theme](#/en-US/theme). -| Name | Default Value | Description | -| --- | --- | --- | -| @cell-font-size | `@font-size-md` | - | -| @cell-line-height | `24px` | - | -| @cell-vertical-padding | `10px` | - | -| @cell-horizontal-padding | `@padding-md` | - | -| @cell-text-color | `@text-color` | - | -| @cell-background-color | `@white` | - | -| @cell-border-color | `@border-color` | - | -| @cell-active-color | `@active-color` | - | -| @cell-required-color | `@red` | - | -| @cell-label-color | `@gray-6` | - | -| @cell-label-font-size | `@font-size-sm` | - | -| @cell-label-line-height | `@line-height-sm` | - | -| @cell-label-margin-top | `@padding-base` | - | -| @cell-value-color | `@gray-6` | - | -| @cell-icon-size | `16px` | - | -| @cell-right-icon-color | `@gray-6` | - | -| @cell-large-vertical-padding | `@padding-sm` | - | -| @cell-large-title-font-size | `@font-size-lg` | - | -| @cell-large-label-font-size | `@font-size-md` | - | -| @cell-group-background-color | `@white` | - | -| @cell-group-title-color | `@gray-6` | - | -| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | -| @cell-group-title-font-size | `@font-size-md` | - | -| @cell-group-title-line-height | `16px` | - | +| Name | Default Value | Description | +| ----------------------------- | ------------------------------------- | ----------- | +| @cell-font-size | `@font-size-md` | - | +| @cell-line-height | `24px` | - | +| @cell-vertical-padding | `10px` | - | +| @cell-horizontal-padding | `@padding-md` | - | +| @cell-text-color | `@text-color` | - | +| @cell-background-color | `@white` | - | +| @cell-border-color | `@border-color` | - | +| @cell-active-color | `@active-color` | - | +| @cell-required-color | `@red` | - | +| @cell-label-color | `@gray-6` | - | +| @cell-label-font-size | `@font-size-sm` | - | +| @cell-label-line-height | `@line-height-sm` | - | +| @cell-label-margin-top | `@padding-base` | - | +| @cell-value-color | `@gray-6` | - | +| @cell-icon-size | `16px` | - | +| @cell-right-icon-color | `@gray-6` | - | +| @cell-large-vertical-padding | `@padding-sm` | - | +| @cell-large-title-font-size | `@font-size-lg` | - | +| @cell-large-label-font-size | `@font-size-md` | - | +| @cell-group-background-color | `@white` | - | +| @cell-group-title-color | `@gray-6` | - | +| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | +| @cell-group-title-font-size | `@font-size-md` | - | +| @cell-group-title-line-height | `16px` | - | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 4d2ece4d3..847586591 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -27,6 +27,17 @@ Vue.use(CellGroup); ``` +### 卡片风格 + +通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 2.12.25 版本开始支持）。 + +```html + + + + +``` + ### 单元格大小 通过 `size` 属性可以控制单元格的大小。 @@ -136,27 +147,27 @@ Vue.use(CellGroup); ### Cell Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 左侧标题 | _number \| string_ | - | -| value | 右侧内容 | _number \| string_ | - | -| label | 标题下方的描述信息 | _string_ | - | -| size | 单元格大小，可选值为 `large` | _string_ | - | -| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | -| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | -| url | 点击后跳转的链接地址 | _string_ | - | -| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | -| border | 是否显示内边框 | _boolean_ | `true` | -| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | -| clickable | 是否开启点击反馈 | _boolean_ | `null` | -| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | -| required | 是否显示表单必填星号 | _boolean_ | `false` | -| center | 是否使内容垂直居中 | _boolean_ | `false` | -| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | -| title-style | 左侧标题额外样式 | _any_ | - | -| title-class | 左侧标题额外类名 | _any_ | - | -| value-class | 右侧内容额外类名 | _any_ | - | -| label-class | 描述信息额外类名 | _any_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | ----------------------------------------------------------------------------------------- | ------------------ | ---------- | +| title | 左侧标题 | _number \| string_ | - | +| value | 右侧内容 | _number \| string_ | - | +| label | 标题下方的描述信息 | _string_ | - | +| size | 单元格大小，可选值为 `large` | _string_ | - | +| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | - | +| icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` | +| url | 点击后跳转的链接地址 | _string_ | - | +| to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `null` | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| center | 是否使内容垂直居中 | _boolean_ | `false` | +| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` | +| title-style | 左侧标题额外样式 | _any_ | - | +| title-class | 左侧标题额外类名 | _any_ | - | +| value-class | 右侧内容额外类名 | _any_ | - | +| label-class | 描述信息额外类名 | _any_ | - | ### Cell Events diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue index b1462a942..5e9187f63 100644 --- a/src/cell/demo/index.vue +++ b/src/cell/demo/index.vue @@ -7,6 +7,13 @@ + + + + + + +
+
+
+
+
单元格
+
内容
+
+
+
单元格 +
描述信息
+
+
内容
+
+
+
单元格
diff --git a/src/style/var.less b/src/style/var.less index 9b7f16ddc..c814924af 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -242,6 +242,9 @@ @cell-group-title-padding: @padding-md @padding-md @padding-xs; @cell-group-title-font-size: @font-size-md; @cell-group-title-line-height: 16px; +@cell-group-inset-padding: 0 @padding-md; +@cell-group-inset-border-radius: @border-radius-lg; +@cell-group-inset-title-padding: @padding-md @padding-md @padding-xs @padding-xl; // Checkbox @checkbox-size: 20px;