+
{slots.title ? slots.title() : props.title}
);
diff --git a/src/cell-group/index.less b/src/cell-group/index.less
index c1c192716..c51533028 100644
--- a/src/cell-group/index.less
+++ b/src/cell-group/index.less
@@ -6,15 +6,28 @@
--van-cell-group-title-padding: @cell-group-title-padding;
--van-cell-group-title-font-size: @cell-group-title-font-size;
--van-cell-group-title-line-height: @cell-group-title-line-height;
+ --van-cell-group-inset-padding: @cell-group-inset-padding;
+ --van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
+ --van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
}
.van-cell-group {
background-color: var(--van-cell-group-background-color);
+ &--inset {
+ margin: var(--van-cell-group-inset-padding);
+ border-radius: var(--van-cell-group-inset-border-radius);
+ overflow: hidden;
+ }
+
&__title {
padding: var(--van-cell-group-title-padding);
color: var(--van-cell-group-title-color);
font-size: var(--van-cell-group-title-font-size);
line-height: var(--van-cell-group-title-line-height);
+
+ &--inset {
+ padding: var(--van-cell-group-inset-title-padding);
+ }
}
}
diff --git a/src/cell-group/var.less b/src/cell-group/var.less
index 756320535..4ce67a1f9 100644
--- a/src/cell-group/var.less
+++ b/src/cell-group/var.less
@@ -6,3 +6,7 @@
var(--van-padding-xs);
@cell-group-title-font-size: var(--van-font-size-md);
@cell-group-title-line-height: 16px;
+@cell-group-inset-padding: 0 var(--van-padding-md);
+@cell-group-inset-border-radius: var(--van-border-radius-lg);
+@cell-group-inset-title-padding: var(--van-padding-md) var(--van-padding-md)
+ var(--van-padding-xs) var(--van-padding-xl);
diff --git a/src/cell/README.md b/src/cell/README.md
index 30b9c62a6..f787bbc22 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -28,6 +28,15 @@ app.use(CellGroup);
```
+### Inset Grouped
+
+```html
+
+
+
+
+```
+
### Size
```html
@@ -129,10 +138,11 @@ app.use(CellGroup);
### CellGroup Props
-| Attribute | Description | Type | Default |
-| --------- | ---------------------------- | --------- | ------- |
-| title | Group title | _string_ | - |
-| border | Whether to show outer border | _boolean_ | `true` |
+| Attribute | Description | Type | Default |
+| -------------- | ---------------------------- | --------- | ------- |
+| title | Group title | _string_ | - |
+| inset `v3.1.0` | Whether to be inset grouped | _boolean_ | `false` |
+| border | Whether to show outer border | _boolean_ | `true` |
### Cell Props
@@ -212,3 +222,6 @@ The component provides the following CSS variables, which can be used to customi
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |
+| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
+| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
+| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index 790ba62b5..52e75b15d 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -30,6 +30,17 @@ app.use(CellGroup);
```
+### 卡片风格
+
+通过 `CellGroup` 的 `inset` 属性,可以将单元格转换为圆角卡片风格。
+
+```html
+
+
+
+
+```
+
### 单元格大小
通过 `size` 属性可以控制单元格的大小。
@@ -132,10 +143,11 @@ app.use(CellGroup);
### CellGroup Props
-| 参数 | 说明 | 类型 | 默认值 |
-| ------ | -------------- | --------- | ------ |
-| title | 分组标题 | _string_ | `-` |
-| border | 是否显示外边框 | _boolean_ | `true` |
+| 参数 | 说明 | 类型 | 默认值 |
+| -------------- | ---------------------- | --------- | ------- |
+| title | 分组标题 | _string_ | `-` |
+| inset `v3.1.0` | 是否展示为圆角卡片风格 | _boolean_ | `false` |
+| border | 是否显示外边框 | _boolean_ | `true` |
### Cell Props
@@ -215,3 +227,6 @@ app.use(CellGroup);
| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
| --van-cell-group-title-line-height | _16px_ | - |
+| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
+| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
+| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index 9f0b950b1..dc2ee9ff9 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -6,6 +6,13 @@
+
+
+
+
+
+
+