feat(Grid): add direction prop (#6256)

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 (
       <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', {
+            bem('content', [
-              center,
+              direction,
-              square,
+              {
-              clickable,
+                center,
-              surround: border && gutter,
+                square,
-            }),
+                clickable,
+                surround: border && gutter,
+              },
+            ]),
             { [BORDER]: border },
           ]}
           onClick={this.onClick}

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;
-  }
 }

src/grid/README.md

@@ -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
 

src/grid/README.zh-CN.md

@@ -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
 

src/grid/demo/index.vue

@@ -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',
     },
   },
 };

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],

src/grid/test/__snapshots__/demo.spec.js.snap

@@ -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%;">