alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(CellGroup): add inset prop (#8885)

Browse Source 
* feat(CellGroup): add inset prop

* docs: hide inset grouped in weapp
This commit is contained in:
neverland
2021-06-18 10:08:45 +08:00
committed by GitHub
parent 38833e1e81
commit 294045db7d
7 changed files with 112 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/cell/README.md
+17 -4
View File
@@ -28,6 +28,15 @@ app.use(CellGroup);
</van-cell-group>
```
### Inset Grouped
```html
<van-cell-group inset>
<van-cell title="Cell title" value="Content" />
<van-cell title="Cell title" value="Content" label="Description" />
</van-cell-group>
```
### 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)_ | - |
src/cell/README.zh-CN.md
+19 -4
View File
@@ -30,6 +30,17 @@ app.use(CellGroup);
</van-cell-group>
```
### 卡片风格
通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格。
```html
<van-cell-group inset>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
```
### 单元格大小
通过 `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)_ | - |
src/cell/demo/index.vue
+19 -10
View File
@@ -6,6 +6,13 @@
</van-cell-group>
</demo-block>
<demo-block v-if="!isWeapp" :title="t('insetGrouped')">
<van-cell-group inset>
<van-cell :title="t('cell')" :value="t('content')" />
<van-cell :title="t('cell')" :value="t('content')" :label="t('desc')" />
</van-cell-group>
</demo-block>
<demo-block :title="t('largeSize')">
<van-cell :title="t('cell')" :value="t('content')" size="large" />
<van-cell
@@ -80,30 +87,32 @@ import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': {
cell: '单元格',
valueOnly: '只设置 value',
showIcon: '展示图标',
showArrow: '展示箭头',
largeSize: '单元格大小',
group: '分组',
groupTitle: '分组标题',
router: '页面导航',
urlRoute: 'URL 跳转',
vueRoute: '路由跳转',
useSlots: '使用插槽',
showIcon: '展示图标',
showArrow: '展示箭头',
largeSize: '单元格大小',
valueOnly: '只设置 value',
groupTitle: '分组标题',
insetGrouped: '卡片风格',
verticalCenter: '垂直居中',
},
'en-US': {
cell: 'Cell title',
valueOnly: 'Value only',
showIcon: 'Left Icon',
showArrow: 'Link',
largeSize: 'Size',
group: 'Group',
groupTitle: 'Group Title',
router: 'Router',
urlRoute: 'URL',
vueRoute: 'Vue Router',
useSlots: 'Use Slots',
showIcon: 'Left Icon',
showArrow: 'Link',
largeSize: 'Size',
valueOnly: 'Value only',
groupTitle: 'Group Title',
insetGrouped: 'Inset Grouped',
verticalCenter: 'Vertical center',
},
};
src/cell/test/__snapshots__/demo.spec.ts.snap
+31
View File
@@ -32,6 +32,37 @@ exports[`should render demo and match snapshot 1`] = `
</div>
</div>
</div>
<div>
<div class="van-cell-group van-cell-group--inset">
<div class="van-cell">
<div class="van-cell__title">
<span>
Cell title
</span>
</div>
<div class="van-cell__value">
<span>
Content
</span>
</div>
</div>
<div class="van-cell">
<div class="van-cell__title">
<span>
Cell title
</span>
<div class="van-cell__label">
Description
</div>
</div>
<div class="van-cell__value">
<span>
Content
</span>
</div>
</div>
</div>
</div>
<div>
<div class="van-cell van-cell--large">
<div class="van-cell__title">