From 5e02aed8c2b0ec83fb155ee51b38a116c6b0713c Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Tue, 3 Apr 2018 17:03:32 +0800
Subject: [PATCH] add grid demo

---
 components/grid/demo/index.vue     |  4 +-
 components/grid/demo/playfround.md | 97 ++++++++++++++++++++++++++++++
 contributors.md                    |  2 +-
 examples/routes.js                 |  2 +-
 4 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 components/grid/demo/playfround.md

diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue
index ede56aac1..b2dd1d080 100644
--- a/components/grid/demo/index.vue
+++ b/components/grid/demo/index.vue
@@ -8,6 +8,7 @@ import Offset from './offset'
 import ResponsiveMore from './responsive-more'
 import Responsive from './responsive'
 import Sort from './sort'
+import Playfround from './playfround'
 import CN from '../index.zh-CN.md'
 import US from '../index.en-US.md'
 const md = {
@@ -53,7 +54,7 @@ Following is a brief look at how it works:
 ## Flex layout
 Our grid systems support Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using \`order\`.
 Flex layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout.
-## Examples 
+## Examples
   `,
 }
 export default {
@@ -125,6 +126,7 @@ export default {
           <ResponsiveMore/>
           <Responsive/>
           <Sort/>
+          <Playfround />
         </div>
         <api>
           <CN slot='cn' />
diff --git a/components/grid/demo/playfround.md b/components/grid/demo/playfround.md
new file mode 100644
index 000000000..4d2a82cbf
--- /dev/null
+++ b/components/grid/demo/playfround.md
@@ -0,0 +1,97 @@
+<cn>
+#### 栅格配置器
+可以简单配置几种等分栅格和间距。
+</cn>
+
+<us>
+#### Playground
+A simple playground for column count and gutter.
+</us>
+
+```html
+<template>
+  <div id="components-grid-demo-playground">
+    <div style="marginBottom:16px">
+      <span style="marginRight:6px">Gutter (px): </span>
+      <div style="width:50%">
+        <a-slider
+          :min="0"
+          :max="Object.keys(gutters).length - 1"
+          v-model="gutterKey"
+          :marks="this.gutters"
+          :step="null"
+        />
+      </div>
+      <span style="marginRight:6px">Column Count:</span>
+      <div style="width:50%">
+        <a-slider
+          :min="0"
+          :max="Object.keys(colCounts).length - 1"
+          v-model="colCountKey"
+          :marks="this.colCounts"
+          :step="null"
+        />
+      </div>
+    </div>
+    <a-row :gutter="gutters[gutterKey]">
+      <a-col v-for="(item, index) in colCounts[colCountKey]" :key="item.toString()" :span="24/colCounts[colCountKey]">
+        <div>Column</div>
+      </a-col>
+    </a-row>
+    <pre v-text="rowColHtml">
+    </pre>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      const gutters = {}
+      const arr = [8, 16, 24, 32, 40, 48]
+      arr.forEach((value, i) => { gutters[i] = value; })
+      const colCounts = {}
+      const arr1 = [2, 3, 4, 6, 8, 12]
+      arr1.forEach((value, i) => { colCounts[i] = value; })
+      return {
+        gutterKey: 1,
+        colCountKey: 2,
+        colCounts,
+        gutters,
+      }
+    },
+    computed: {
+      rowColHtml() {
+        const colCount = this.colCounts[this.colCountKey]
+        const getter = this.gutters[this.gutterKey]
+        // ${colCode}</Row>
+        let colCode = '<Row :gutter="' + getter + '">\n'
+        for (let i = 0; i < colCount; i++) {
+          const spanNum = 24 / colCount
+          colCode += '  <Col :span="' + spanNum + '"/>\n'
+        }
+        colCode += '</Row>'
+        return colCode
+      }
+    },
+  }
+</script>
+<style scoped>
+  #components-grid-demo-playground [class^="ant-col-"] {
+    background: transparent;
+    border: 0;
+  }
+  #components-grid-demo-playground [class^="ant-col-"] > div {
+    background: #00A0E9;
+    height: 120px;
+    line-height: 120px;
+    font-size: 13px;
+  }
+  #components-grid-demo-playground pre {
+    background: #f9f9f9;
+    border-radius: 6px;
+    font-size: 13px;
+    padding: 8px 16px;
+  }
+</style>
+```
+
+
diff --git a/contributors.md b/contributors.md
index 79aa47e5d..43064e78b 100644
--- a/contributors.md
+++ b/contributors.md
@@ -33,7 +33,7 @@ Carousel
 Mention
 
 ##万
-Grid | done slider完成后补全playground demo
+Grid | done
 Layout
 Anchor
 Tree
diff --git a/examples/routes.js b/examples/routes.js
index b73615c7c..d9670c48e 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
   const hashs = window.location.hash.split('/')
   const d = hashs[hashs.length - 1]
   return {
-    component: import(`../components/timeline/demo/${d}`),
+    component: import(`../components/grid/demo/${d}`),
   }
 }
 export default [