mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-23 09:52:57 +08:00
feat(Grid): add icon-size prop (#4656)
This commit is contained in:
parent
307e9d3c7b
commit
39af08170c
@ -71,7 +71,13 @@ export default createComponent({
|
|||||||
return [
|
return [
|
||||||
this.slots('icon') ||
|
this.slots('icon') ||
|
||||||
(this.icon && (
|
(this.icon && (
|
||||||
<Icon name={this.icon} dot={this.dot} info={this.info} class={bem('icon')} />
|
<Icon
|
||||||
|
name={this.icon}
|
||||||
|
dot={this.dot}
|
||||||
|
info={this.info}
|
||||||
|
size={this.parent.iconSize}
|
||||||
|
class={bem('icon')}
|
||||||
|
/>
|
||||||
)),
|
)),
|
||||||
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
|
this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
|
||||||
];
|
];
|
||||||
|
@ -107,6 +107,7 @@ Vue.use(Grid).use(GridItem);
|
|||||||
| center | Whether to center content | *boolean* | `true` | - |
|
| center | Whether to center content | *boolean* | `true` | - |
|
||||||
| square | Whether to be square shape | *boolean* | `false` | - |
|
| square | Whether to be square shape | *boolean* | `false` | - |
|
||||||
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
|
| clickable | Whether to show click feedback when clicked | *boolean* | `false` | - |
|
||||||
|
| icon-size | Icon size | *string \| number* | `28px` | 2.2.6 |
|
||||||
|
|
||||||
### GridItem Props
|
### GridItem Props
|
||||||
|
|
||||||
|
@ -125,6 +125,7 @@ Vue.use(Grid).use(GridItem);
|
|||||||
| center | 是否将格子内容居中显示 | *boolean* | `true` | - |
|
| center | 是否将格子内容居中显示 | *boolean* | `true` | - |
|
||||||
| square | 是否将格子固定为正方形 | *boolean* | `false` | - |
|
| square | 是否将格子固定为正方形 | *boolean* | `false` | - |
|
||||||
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | - |
|
| clickable | 是否开启格子点击反馈 | *boolean* | `false` | - |
|
||||||
|
| icon-size | 图标大小,默认单位为`px` | *string \| number* | `28px` | 2.2.6 |
|
||||||
|
|
||||||
### GridItem Props
|
### GridItem Props
|
||||||
|
|
||||||
|
@ -10,6 +10,7 @@ export default createComponent({
|
|||||||
props: {
|
props: {
|
||||||
square: Boolean,
|
square: Boolean,
|
||||||
gutter: [Number, String],
|
gutter: [Number, String],
|
||||||
|
iconSize: [Number, String],
|
||||||
clickable: Boolean,
|
clickable: Boolean,
|
||||||
columnNum: {
|
columnNum: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
@ -1,5 +1,14 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`icon-size prop 1`] = `
|
||||||
|
<div class="van-grid van-hairline--top">
|
||||||
|
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||||
|
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-success van-grid-item__icon" style="font-size: 10px;">
|
||||||
|
<!----></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`sqaure and set gutter 1`] = `
|
exports[`sqaure and set gutter 1`] = `
|
||||||
<div class="van-grid" style="padding-left: 10rem;">
|
<div class="van-grid" style="padding-left: 10rem;">
|
||||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||||
|
@ -38,3 +38,15 @@ test('sqaure and set gutter', () => {
|
|||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test('icon-size prop', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
template: `
|
||||||
|
<van-grid icon-size="10">
|
||||||
|
<van-grid-item icon="success" />
|
||||||
|
</van-grid>
|
||||||
|
`
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(wrapper).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user