feat(Grid): add Grid component (#2016)

example/app.json

@@ -55,7 +55,8 @@
     "pages/collapse/index",
     "pages/picker/index",
     "pages/overlay/index",
-    "pages/circle/index"
+    "pages/circle/index",
+    "pages/grid/index"
   ],
   "window": {
     "navigationBarBackgroundColor": "#f8f8f8",
@@ -115,7 +116,9 @@
     "van-collapse-item": "./dist/collapse-item/index",
     "van-picker": "./dist/picker/index",
     "van-overlay": "./dist/overlay/index",
-    "van-circle": "./dist/circle/index"
+    "van-circle": "./dist/circle/index",
+    "van-grid": "./dist/grid/index",
+    "van-grid-item": "./dist/grid-item/index"
   },
   "sitemapLocation": "sitemap.json"
 }

example/config.js

@@ -155,6 +155,10 @@ export default [
     groupName: '导航组件',
     icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
     list: [
+      {
+        path: '/grid',
+        title: 'Grid 宫格'
+      },
       {
         path: '/sidebar',
         title: 'Sidebar 侧边导航'

example/pages/grid/index.js

@@ -0,0 +1,3 @@
+import Page from '../../common/page';
+
+Page();

example/pages/grid/index.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "Grid 宫格"
+}

example/pages/grid/index.wxml

@@ -0,0 +1,38 @@
+<demo-block title="基本用法">
+  <van-grid>
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ 4 }}"></van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="自定义列数">
+  <van-grid column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}"></van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="自定义内容">
+  <van-grid column-num="3" border="{{ false }}">
+    <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
+      <image class="van-image" src="https://img.yzcdn.cn/vant/apple-{{ index+1 }}.jpg" />
+    </van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="正方形格子">
+  <van-grid square>
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="格子间距">
+  <van-grid gutter="{{ 10 }}">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="页面跳转">
+  <van-grid clickable column-num="2">
+    <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转"></van-grid-item>
+    <van-grid-item icon="search" link-type="reLaunch" url="/pages/dashboard/index" text="ReLaunch 跳转"></van-grid-item>
+  </van-grid>
+</demo-block>

example/pages/grid/index.wxss

@@ -0,0 +1,4 @@
+.van-image {
+  width: 100%;
+  height: 90px;
+}

packages/common/style/var.less

@@ -19,6 +19,20 @@
 @background-color: #f8f8f8;
 @background-color-light: #fafafa;
 
+// Padding
+@padding-base: 4px;
+@padding-xs: @padding-base * 2;
+@padding-sm: @padding-base * 3;
+@padding-md: @padding-base * 4;
+@padding-lg: @padding-base * 6;
+@padding-xl: @padding-base * 8;
+
+// Font Size
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+
 // Button
 @button-default-color: @text-color;
 @button-default-background-color: @white;
@@ -171,3 +185,11 @@
 
 // iPhoneX
 @safe-area-inset-bottom: 34px;
+
+// GridItem
+@grid-item-content-padding: @padding-md @padding-xs;
+@grid-item-content-background-color: @white;
+@grid-item-content-active-color: @active-color;
+@grid-item-icon-size: 26px;
+@grid-item-text-color: @gray-darker;
+@grid-item-text-font-size: @font-size-sm;

packages/grid-item/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

packages/grid-item/index.less

@@ -0,0 +1,57 @@
+@import '../common/style/var.less';
+
+.van-grid-item {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+
+  &--square {
+    height: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: @grid-item-content-padding;
+    background-color: @grid-item-content-background-color;
+
+    &::after {
+      z-index: 1;
+      border-width: 0 1px 1px 0;
+    }
+
+    &--surround {
+      &::after {
+        border-width: 1px;
+      }
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--square {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &--clickable:active {
+      background-color: @grid-item-content-active-color;
+    }
+  }
+
+  &__icon {
+    font-size: @grid-item-icon-size;
+  }
+
+  &__text {
+    color: @grid-item-text-color;
+    font-size: @grid-item-text-font-size;
+    word-break: break-all;
+  }
+}

packages/grid-item/index.ts

@@ -0,0 +1,66 @@
+import { link } from '../mixins/link';
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  relation: {
+    name: 'grid',
+    type: 'ancestor',
+    linked(parent) {
+      this.parent = parent;
+    }
+  },
+
+  mixins: [link],
+
+  props: {
+    icon: String,
+    text: String,
+    useSlot: Boolean
+  },
+
+  mounted() {
+    this.updateStyle();
+  },
+
+  methods: {
+    updateStyle() {
+      if (!this.parent) {
+        return;
+      }
+
+      const { data, children } = this.parent;
+      const { columnNum, border, square, gutter, clickable, center } = data;
+      const width = `${100 / columnNum}%`;
+
+      const styleWrapper: Array<string> = [];
+      styleWrapper.push(`width: ${width}`);
+
+      if (square) {
+        styleWrapper.push(`padding-top: ${width}`);
+      }
+
+      if (gutter) {
+        styleWrapper.push(`padding-right: ${gutter}px`);
+      }
+
+      const index = children.indexOf(this);
+      if (index >= columnNum) {
+        styleWrapper.push(`margin-top: ${gutter}px`);
+      }
+
+      this.setData({
+        style: styleWrapper.join('; '),
+        center,
+        border,
+        square,
+        gutter,
+        clickable
+      });
+    },
+
+    onClick() {
+      this.$emit('click');
+      this.jumpLink();
+    }
+  }
+});

packages/grid-item/index.wxml

@@ -0,0 +1,19 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="{{ utils.bem('grid-item', { square }) }}" style="{{ style }}" bindtap="onClick">
+  <view class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}">
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="van-grid-item__icon">
+        <van-icon wx:if="{{ icon }}" name="{{ icon }}" />
+        <slot wx:else name="icon"></slot>
+      </view>
+      <view class="van-grid-item__text">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

packages/grid/README.md

@@ -0,0 +1,131 @@
+# Grid 宫格
+
+### 介绍
+
+宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，默认为`ES6`版本，`ES5`引入方式参见[快速上手](#/quickstart)
+
+```json
+"usingComponents": {
+  "van-grid": "path/to/vant-weapp/dist/grid/index",
+  "van-grid-item": "path/to/vant-weapp/dist/grid-item/index"
+}
+```
+
+## 代码演示
+
+### 基本用法
+
+通过`icon`属性设置格子内的图标，`text`属性设置文字内容
+
+```html
+<van-grid>
+  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 4 }}"></van-grid-item>
+</van-grid>
+```
+
+### 自定义列数
+
+默认一行展示四个格子，可以通过`column-num`自定义列数
+
+```html
+<van-grid column-num="3">
+  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 6 }}"></van-grid-item>
+</van-grid>
+```
+
+### 自定义内容
+
+通过插槽可以自定义格子展示的内容
+
+```html
+<van-grid column-num="3" border="{{ false }}">
+  <van-grid-item use-slot wx:for="{{ 3 }}" wx:for-item="index">
+    <image
+      class="van-image"
+      src="https://img.yzcdn.cn/vant/apple-{{ index+1 }}.jpg"
+    />
+  </van-grid-item>
+</van-grid>
+```
+
+### 正方形格子
+
+设置`square`属性后，格子的高度会和宽度保持一致
+
+```html
+<van-grid square>
+  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
+</van-grid>
+```
+
+### 格子间距
+
+通过`gutter`属性设置格子之间的距离
+
+```html
+<van-grid gutter="{{ 10 }}">
+  <van-grid-item icon="photo-o" text="文字" wx:for="{{ 8 }}"></van-grid-item>
+</van-grid>
+```
+
+### 页面跳转
+
+可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型
+
+```html
+<van-grid clickable column-num="2">
+  <van-grid-item
+    icon="home-o"
+    link-type="navigateTo"
+    url="/pages/dashboard/index"
+    text="Navigate跳转"
+  ></van-grid-item>
+  <van-grid-item
+    icon="search"
+    link-type="reLaunch"
+    url="/pages/dashboard/index"
+    text="ReLaunch跳转"
+  ></van-grid-item>
+</van-grid>
+```
+
+## API
+
+### Grid Props
+
+| 参数       | 说明                           | 类型               | 默认值  | 版本 |
+| ---------- | ------------------------------ | ------------------ | ------- | ---- |
+| column-num | 列数                           | *number*           | `4`     | -    |
+| gutter     | 格子之间的间距，默认单位为`px` | *string \| number* | `0`     | -    |
+| border     | 是否显示边框                   | *boolean*          | `true`  | -    |
+| center     | 是否将格子内容居中显示         | *boolean*          | `true`  | -    |
+| square     | 是否将格子固定为正方形         | *boolean*          | `false` | -    |
+| clickable  | 是否开启格子点击反馈           | *boolean*          | `false` | -    |
+| use-slot | 是否使用自定义内容的插槽         | *boolean*          | `false` |
+
+### GridItem Props
+
+| 参数      | 说明                                                       | 类型     | 默认值       | 版本 |
+| --------- | ---------------------------------------------------------- | -------- | ------------ | ---- |
+| text      | 文字                                                       | *string* | -            | -    |
+| icon      | 图标名称或图片链接，可选值见 Icon 组件                     | *string* | -            | -    |
+| url       | 跳转链接                                                   | *string* | -            | -    |
+| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | -    |
+
+### GridItem Events
+
+| 事件名     | 说明           | 回调参数 |
+| ---------- | -------------- | -------- |
+| bind:click | 点击格子时触发 | -        |
+
+### GridItem Slots
+
+| 名称    | 说明                                                 |
+| ------- | ---------------------------------------------------- |
+| default | 自定义宫格的所有内容，需要设置`use-slot`属性         |
+| icon    | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 |
+| text    | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 |

packages/grid/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/grid/index.less

@@ -0,0 +1,5 @@
+.van-grid {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+}

packages/grid/index.ts

@@ -0,0 +1,70 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  relation: {
+    name: 'grid-item',
+    type: 'descendant',
+    linked(child) {
+      this.children.push(child);
+    },
+    unlinked(child) {
+      this.children = this.children.filter(
+        (item: WechatMiniprogram.Component.TrivialInstance) => item !== child
+      );
+    }
+  },
+
+  props: {
+    square: {
+      type: Boolean,
+      observer: 'updateChildren'
+    },
+    gutter: {
+      type: [Number, String],
+      value: 0,
+      observer: 'updateChildren'
+    },
+    clickable: {
+      type: Boolean,
+      observer: 'updateChildren'
+    },
+    columnNum: {
+      type: Number,
+      value: 4,
+      observer: 'updateChildren'
+    },
+    center: {
+      type: Boolean,
+      value: true,
+      observer: 'updateChildren'
+    },
+    border: {
+      type: Boolean,
+      value: true,
+      observer: 'updateChildren'
+    }
+  },
+
+  beforeCreate() {
+    this.children = [];
+  },
+
+  created() {
+    const { gutter } = this.data;
+    if (gutter) {
+      this.setData({
+        style: `padding-left: ${gutter}px`
+      });
+    }
+  },
+
+  methods: {
+    updateChildren() {
+      this.children.forEach(
+        (child: WechatMiniprogram.Component.TrivialInstance) => {
+          child.updateStyle();
+        }
+      );
+    }
+  }
+});

packages/grid/index.wxml

@@ -0,0 +1,3 @@
+<view class="van-grid {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ style }}">
+  <slot />
+</view>