diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index aecb9e7be..ca44c7da7 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -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 (
@@ -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}
diff --git a/src/grid-item/index.less b/src/grid-item/index.less
index c8072cb6d..322982c53 100644
--- a/src/grid-item/index.less
+++ b/src/grid-item/index.less
@@ -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;
- }
}
diff --git a/src/grid/README.md b/src/grid/README.md
index e07219378..0ab19d44b 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -63,6 +63,16 @@ Vue.use(GridItem);
```
+### Horizontal
+
+```html
+
+
+
+
+
+```
+
### 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
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index f766652b6..1dd484706 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -77,6 +77,18 @@ Vue.use(GridItem);
```
+### 内容横排
+
+将`direction`属性设置为`horizontal`，可以让宫格的内容呈横向排列
+
+```html
+
+
+
+
+
+```
+
### 页面导航
通过`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
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index 241f0e69b..544f524f1 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -67,6 +67,14 @@
+
+
+
+
+
+
+
+
@@ -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',
},
},
};
diff --git a/src/grid/index.js b/src/grid/index.js
index bb128f27e..aaf85788b 100644
--- a/src/grid/index.js
+++ b/src/grid/index.js
@@ -11,6 +11,7 @@ export default createComponent({
square: Boolean,
gutter: [Number, String],
iconSize: [Number, String],
+ direction: String,
clickable: Boolean,
columnNum: {
type: [Number, String],
diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap
index 4a56f7803..4b9a61ac3 100644
--- a/src/grid/test/__snapshots__/demo.spec.js.snap
+++ b/src/grid/test/__snapshots__/demo.spec.js.snap
@@ -150,6 +150,22 @@ exports[`renders demo correctly 1`] = `
+