[new feature] add grid component (#3669)

2019-06-28 11:16:42 +08:00
parent 1850230102
commit 9737a8b9d0
36 changed files with 907 additions and 51 deletions
@@ -0,0 +1,123 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-grid>
+        <van-grid-item
+          v-for="i in 4"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('columnNum')">
+      <van-grid :column-num="3">
+        <van-grid-item
+          v-for="i in 6"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('customContent')">
+      <van-grid
+        :border="false"
+        :column-num="3"
+      >
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-1.jpg"
+          />
+        </van-grid-item>
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-2.jpg"
+          />
+        </van-grid-item>
+        <van-grid-item>
+          <van-image
+            fit="contain"
+            src="https://img.yzcdn.cn/vant/apple-3.jpg"
+          />
+        </van-grid-item>
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('square')">
+      <van-grid square>
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          icon="photo-o"
+          :text="$t('text')"
+        />
+      </van-grid>
+    </demo-block>
+
+    <demo-block :title="$t('gutter')">
+      <van-grid :gutter="10">
+        <van-grid-item
+          v-for="i in 8"
+          :key="i"
+          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="/"
+        />
+        <van-grid-item
+          icon="search"
+          :text="$t('urlRoute')"
+          url="https://www.baidu.com"
+        />
+      </van-grid>
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      text: '文字',
+      route: '页面导航',
+      gutter: '格子间距',
+      square: '正方形格子',
+      columnNum: '自定义列数',
+      customContent: '自定义内容',
+      urlRoute: 'URL 跳转',
+      vueRoute: '路由跳转'
+    },
+    'en-US': {
+      text: 'Text',
+      route: 'Route',
+      gutter: 'Gutter',
+      square: 'Square',
+      columnNum: 'Column Num',
+      customContent: 'Custom Content',
+      urlRoute: 'URL',
+      vueRoute: 'Vue Router'
+    }
+  }
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+</style>