mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Cell): cell-group inset prop (#4341)
* feat(Cell): cell-group inset prop * fix(Cell): remove inset prop default value
This commit is contained in:
nemo-shen
GitHub
parent
82811d4058
commit
98721b7b7e
@ -10,6 +10,13 @@
|
|||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="卡片风格">
|
||||||
|
<van-cell-group inset>
|
||||||
|
<van-cell title="单元格" value="内容" />
|
||||||
|
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||||
|
</van-cell-group>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="单元格大小">
|
<demo-block title="单元格大小">
|
||||||
<van-cell-group>
|
<van-cell-group>
|
||||||
<van-cell
|
<van-cell
|
||||||
|
|||||||
@ -2,10 +2,21 @@
|
|||||||
@import '../common/style/theme.less';
|
@import '../common/style/theme.less';
|
||||||
|
|
||||||
.van-cell-group {
|
.van-cell-group {
|
||||||
|
&--inset {
|
||||||
|
.theme(margin, '@cell-group-inset-padding');
|
||||||
|
.theme(border-radius, '@cell-group-inset-border-radius');
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
.theme(padding, '@cell-group-title-padding');
|
.theme(padding, '@cell-group-title-padding');
|
||||||
.theme(font-size, '@cell-group-title-font-size');
|
.theme(font-size, '@cell-group-title-font-size');
|
||||||
.theme(line-height, '@cell-group-title-line-height');
|
.theme(line-height, '@cell-group-title-line-height');
|
||||||
.theme(color, '@cell-group-title-color');
|
.theme(color, '@cell-group-title-color');
|
||||||
|
|
||||||
|
&--inset {
|
||||||
|
.theme(padding, '@cell-group-inset-title-padding');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,5 +7,6 @@ VantComponent({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: true,
|
value: true,
|
||||||
},
|
},
|
||||||
|
inset: Boolean,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,9 +1,11 @@
|
|||||||
|
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||||
|
|
||||||
<view
|
<view
|
||||||
wx:if="{{ title }}"
|
wx:if="{{ title }}"
|
||||||
class="van-cell-group__title"
|
class="{{ utils.bem('cell-group__title', { inset }) }}"
|
||||||
>
|
>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</view>
|
</view>
|
||||||
<view class="custom-class van-cell-group {{ border ? 'van-hairline--top-bottom' : '' }}">
|
<view class="custom-class {{ utils.bem('cell-group', { inset }) }} {{ border ? 'van-hairline--top-bottom' : '' }}">
|
||||||
<slot />
|
<slot />
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@ -28,6 +28,17 @@
|
|||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 卡片风格
|
||||||
|
|
||||||
|
通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 1.7.2 版本开始支持）。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-cell-group inset>
|
||||||
|
<van-cell title="单元格" value="内容" />
|
||||||
|
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||||
|
</van-cell-group>
|
||||||
|
```
|
||||||
|
|
||||||
### 单元格大小
|
### 单元格大小
|
||||||
|
|
||||||
通过`size`属性可以控制单元格的大小。
|
通过`size`属性可以控制单元格的大小。
|
||||||
@ -109,10 +120,11 @@
|
|||||||
|
|
||||||
### CellGroup Props
|
### CellGroup Props
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| ------ | -------------- | --------- | ------ | ---- |
|
| -------------- | ---------------------- | --------- | ------- |
|
||||||
| title | 分组标题 | _string_ | `-` | - |
|
| title | 分组标题 | _string_ | `-` |
|
||||||
| border | 是否显示外边框 | _boolean_ | `true` | - |
|
| inset `v1.7.2` | 是否展示为圆角卡片风格 | _boolean_ | `false` |
|
||||||
|
| border | 是否显示外边框 | _boolean_ | `true` |
|
||||||
|
|
||||||
### CellGroup 外部样式类
|
### CellGroup 外部样式类
|
||||||
|
|
||||||
@ -122,24 +134,24 @@
|
|||||||
|
|
||||||
### Cell Props
|
### Cell Props
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- | --- |
|
| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ |
|
||||||
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - |
|
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||||
| title | 左侧标题 | _string \| number_ | - |
|
| title | 左侧标题 | _string \| number_ | - |
|
||||||
| title-width | 标题宽度，须包含单位 | _string_ | - | - |
|
| title-width | 标题宽度，须包含单位 | _string_ | - |
|
||||||
| value | 右侧内容 | _string \| number_ | - | - |
|
| value | 右侧内容 | _string \| number_ | - |
|
||||||
| label | 标题下方的描述信息 | _string_ | - | - |
|
| label | 标题下方的描述信息 | _string_ | - |
|
||||||
| size | 单元格大小，可选值为 `large` | _string_ | - | - |
|
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||||
| border | 是否显示下边框 | _boolean_ | `true` | - |
|
| border | 是否显示下边框 | _boolean_ | `true` |
|
||||||
| center | 是否使内容垂直居中 | _boolean_ | `false` | - |
|
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||||
| url | 点击后跳转的链接地址 | _string_ | - | - |
|
| url | 点击后跳转的链接地址 | _string_ | - |
|
||||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - |
|
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` |
|
||||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` | - |
|
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | - |
|
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||||
| required | 是否显示表单必填星号 | _boolean_ | `false` | - |
|
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | - |
|
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
|
||||||
| use-label-slot | 是否使用 label slot | _boolean_ | `false` | - |
|
| use-label-slot | 是否使用 label slot | _boolean_ | `false` |
|
||||||
| title-style | 标题样式 | _string_ | - | 1.4.0 |
|
| title-style `v1.4.0` | 标题样式 | _string_ | - |
|
||||||
|
|
||||||
### Cell Event
|
### Cell Event
|
||||||
|
|
||||||
|
|||||||
@ -193,6 +193,9 @@
|
|||||||
@cell-group-title-padding: @padding-md @padding-md @padding-xs;
|
@cell-group-title-padding: @padding-md @padding-md @padding-xs;
|
||||||
@cell-group-title-font-size: @font-size-md;
|
@cell-group-title-font-size: @font-size-md;
|
||||||
@cell-group-title-line-height: 16px;
|
@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
|
||||||
@checkbox-size: 20px;
|
@checkbox-size: 20px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user