mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
feat(Cell): cell-group add inset prop (#9055)
* feat(Cell): cell-group add inset prop * style(CellGroup): prettier * docs(Cell): format doc
This commit is contained in:
nemo-shen
GitHub
parent
93b502b17b
commit
3d84598cbd
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = (
|
||||
<div
|
||||
class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
|
||||
class={[
|
||||
bem({ inset: props.inset }),
|
||||
{ [BORDER_TOP_BOTTOM]: props.border },
|
||||
]}
|
||||
{...inherit(ctx, true)}
|
||||
>
|
||||
{slots.default?.()}
|
||||
@ -36,7 +40,7 @@ function CellGroup(
|
||||
if (props.title || slots.title) {
|
||||
return (
|
||||
<div key={ctx.data.key}>
|
||||
<div class={bem('title')}>
|
||||
<div class={bem('title', { inset: props.inset })}>
|
||||
{slots.title ? slots.title() : props.title}
|
||||
</div>
|
||||
{Group}
|
||||
@ -49,6 +53,7 @@ function CellGroup(
|
||||
|
||||
CellGroup.props = {
|
||||
title: String,
|
||||
inset: Boolean,
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
@ -21,6 +21,15 @@ Vue.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,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` | - |
|
||||
|
||||
@ -27,6 +27,17 @@ Vue.use(CellGroup);
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 卡片风格
|
||||
|
||||
通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 2.12.25 版本开始支持）。
|
||||
|
||||
```html
|
||||
<van-cell-group inset>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 单元格大小
|
||||
|
||||
通过 `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
|
||||
|
||||
|
||||
@ -7,6 +7,13 @@
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :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
|
||||
@ -91,6 +98,7 @@ export default {
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转',
|
||||
useSlots: '使用插槽',
|
||||
insetGrouped: '卡片风格',
|
||||
verticalCenter: '垂直居中',
|
||||
},
|
||||
'en-US': {
|
||||
@ -105,6 +113,7 @@ export default {
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router',
|
||||
useSlots: 'Use Slots',
|
||||
insetGrouped: 'Inset Grouped',
|
||||
verticalCenter: 'Vertical center',
|
||||
},
|
||||
},
|
||||
|
||||
@ -16,6 +16,20 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group van-cell-group--inset van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span>
|
||||
<div class="van-cell__label">描述信息</div>
|
||||
</div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user