mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Grid): add direction prop (#6256)
This commit is contained in:
neverland
GitHub
parent
67716c65e3
commit
45f3c9e759
@ -120,7 +120,14 @@ export default createComponent({
|
||||
},
|
||||
|
||||
render() {
|
||||
const { center, border, square, gutter, clickable } = this.parent;
|
||||
const {
|
||||
center,
|
||||
border,
|
||||
square,
|
||||
gutter,
|
||||
direction,
|
||||
clickable,
|
||||
} = this.parent;
|
||||
|
||||
return (
|
||||
<div class={[bem({ square })]} style={this.style}>
|
||||
@ -129,12 +136,15 @@ export default createComponent({
|
||||
role={clickable ? 'button' : null}
|
||||
tabindex={clickable ? 0 : null}
|
||||
class={[
|
||||
bem('content', {
|
||||
center,
|
||||
square,
|
||||
clickable,
|
||||
surround: border && gutter,
|
||||
}),
|
||||
bem('content', [
|
||||
direction,
|
||||
{
|
||||
center,
|
||||
square,
|
||||
clickable,
|
||||
surround: border && gutter,
|
||||
},
|
||||
]),
|
||||
{ [BORDER]: border },
|
||||
]}
|
||||
onClick={this.onClick}
|
||||
|
||||
@ -8,6 +8,25 @@
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: @grid-item-icon-size;
|
||||
}
|
||||
|
||||
&__icon-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: @grid-item-text-color;
|
||||
font-size: @grid-item-text-font-size;
|
||||
line-height: 1.5;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__icon + &__text {
|
||||
margin-top: @padding-xs;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -33,6 +52,15 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
.van-grid-item__icon + .van-grid-item__text {
|
||||
margin-top: 0;
|
||||
margin-left: @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
&--surround {
|
||||
&::after {
|
||||
border-width: @border-width-base;
|
||||
@ -47,22 +75,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
font-size: @grid-item-icon-size;
|
||||
}
|
||||
|
||||
&__icon-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__text {
|
||||
color: @grid-item-text-color;
|
||||
font-size: @grid-item-text-font-size;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__icon + &__text {
|
||||
margin-top: @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
@ -63,6 +63,16 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Horizontal
|
||||
|
||||
```html
|
||||
<van-grid direction="horizontal" :column-num="2">
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### Route
|
||||
|
||||
```html
|
||||
@ -94,6 +104,7 @@ Vue.use(GridItem);
|
||||
| center | Whether to center content | _boolean_ | `true` |
|
||||
| square | Whether to be square shape | _boolean_ | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | _boolean_ | `false` |
|
||||
| direction `v2.8.2` | Content arrangement direction, can be set to `horizontal` | _string_ | `vertical` |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
|
||||
@ -77,6 +77,18 @@ Vue.use(GridItem);
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 内容横排
|
||||
|
||||
将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
|
||||
|
||||
```html
|
||||
<van-grid direction="horizontal" :column-num="2">
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
<van-grid-item icon="photo-o" text="文字" />
|
||||
</van-grid>
|
||||
```
|
||||
|
||||
### 页面导航
|
||||
|
||||
通过`to`属性设置`vue-router`跳转链接，通过`url`属性设置 URL 跳转链接
|
||||
@ -112,6 +124,7 @@ Vue.use(GridItem);
|
||||
| center | 是否将格子内容居中显示 | _boolean_ | `true` |
|
||||
| square | 是否将格子固定为正方形 | _boolean_ | `false` |
|
||||
| clickable | 是否开启格子点击反馈 | _boolean_ | `false` |
|
||||
| direction `v2.8.2` | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
|
||||
@ -67,6 +67,14 @@
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('horizontal')">
|
||||
<van-grid direction="horizontal" :column-num="3">
|
||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
||||
<van-grid-item icon="photo-o" :text="t('text')" />
|
||||
</van-grid>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('route')">
|
||||
<van-grid clickable :column-num="2">
|
||||
<van-grid-item icon="home-o" :text="t('vueRoute')" to="/" />
|
||||
@ -100,6 +108,7 @@ export default {
|
||||
urlRoute: 'URL 跳转',
|
||||
vueRoute: '路由跳转',
|
||||
showBadge: '徽标提示',
|
||||
horizontal: '内容横排',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Text',
|
||||
@ -111,6 +120,7 @@ export default {
|
||||
urlRoute: 'URL',
|
||||
vueRoute: 'Vue Router',
|
||||
showBadge: 'Show Badge',
|
||||
horizontal: 'Horizontal',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -11,6 +11,7 @@ export default createComponent({
|
||||
square: Boolean,
|
||||
gutter: [Number, String],
|
||||
iconSize: [Number, String],
|
||||
direction: String,
|
||||
clickable: Boolean,
|
||||
columnNum: {
|
||||
type: [Number, String],
|
||||
|
||||
@ -150,6 +150,22 @@ exports[`renders demo correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
<div class="van-grid-item" style="flex-basis: 33.333333333333336%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--horizontal van-grid-item__content--center van-hairline"><i class="van-icon van-icon-photo-o van-grid-item__icon">
|
||||
<!----></i><span class="van-grid-item__text">文字</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 50%;">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user