blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 112 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/cell-group/CellGroup.tsx
View File

@ -11,18 +11,25 @@ export default defineComponent({
props: {
title: String,
inset: Boolean,
border: truthProp,
},
setup(props, { slots, attrs }) {
const renderGroup = () => (
<div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...attrs}>
<div
class={[
bem({ inset: props.inset }),
{ [BORDER_TOP_BOTTOM]: props.border && !props.inset },
]}
{...attrs}
>
{slots.default?.()}
</div>
);
const renderTitle = () => (
<div class={bem('title')}>
<div class={bem('title', { inset: props.inset })}>
{slots.title ? slots.title() : props.title}
</div>
);

13
src/cell-group/index.less
View File

@ -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);
}
}
}

4
src/cell-group/var.less
View File

@ -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);

21
src/cell/README.md
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)_ | - |

23
src/cell/README.zh-CN.md
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)_ | - |

29
src/cell/demo/index.vue
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',
},
};

31
src/cell/test/__snapshots__/demo.spec.ts.snap
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">