1 line
110 KiB
JavaScript
1 line
110 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{1204:function(s,a,t){},1205:function(s,a,t){},1297:function(s,a,t){"use strict";var l=t(1204);t.n(l).a},1298:function(s,a,t){"use strict";var l=t(1205);t.n(l).a},1441:function(s,a,t){"use strict";t.r(a);var l=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-row>\n <a-col :span="12">col-12</a-col>\n <a-col :span="12">col-12</a-col>\n </a-row>\n <a-row>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8">col-8</a-col>\n </a-row>\n <a-row>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Basic Grid\nFrom the stack to the horizontal arrangement.\nYou can create a basic grid system by using a single set of `Row` and `Col` grid assembly, all of the columns (Col) must be placed in `Row`.\n",cn:"\n#### 基础栅格\n从堆叠到水平排列。\n使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。\n",sourceCode:'<template>\n <div>\n <a-row>\n <a-col :span="12">col-12</a-col>\n <a-col :span="12">col-12</a-col>\n </a-row>\n <a-row>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8">col-8</a-col>\n </a-row>\n <a-row>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n <a-col :span="6">col-6</a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-row",[t("a-col",{attrs:{span:12}},[s._v("col-12")]),s._v(" "),t("a-col",{attrs:{span:12}},[s._v("col-12")])],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:8}},[s._v("col-8")]),s._v(" "),t("a-col",{attrs:{span:8}},[s._v("col-8")]),s._v(" "),t("a-col",{attrs:{span:8}},[s._v("col-8")])],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:6}},[s._v("col-6")]),s._v(" "),t("a-col",{attrs:{span:6}},[s._v("col-6")]),s._v(" "),t("a-col",{attrs:{span:6}},[s._v("col-6")]),s._v(" "),t("a-col",{attrs:{span:6}},[s._v("col-6")])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"基础栅格"}},[s._v("基础栅格 "),t("a",{staticClass:"anchor",attrs:{href:"#基础栅格"}},[s._v("#")])]),s._v(" "),t("p",[s._v("从堆叠到水平排列。"),t("br"),s._v("\n使用单一的一组 "),t("code",[s._v("Row")]),s._v(" 和 "),t("code",[s._v("Col")]),s._v(" 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 "),t("code",[s._v("Row")]),s._v(" 内。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Basic-Grid"}},[s._v("Basic Grid "),t("a",{staticClass:"anchor",attrs:{href:"#Basic-Grid"}},[s._v("#")])]),s._v(" "),t("p",[s._v("From the stack to the horizontal arrangement."),t("br"),s._v("\nYou can create a basic grid system by using a single set of "),t("code",[s._v("Row")]),s._v(" and "),t("code",[s._v("Col")]),s._v(" grid assembly, all of the columns (Col) must be placed in "),t("code",[s._v("Row")]),s._v("."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("col-12"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("col-12"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("col-8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("col-8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("col-8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};l._withStripped=!0;var n=t(31),v=Object(n.a)({},l,[],!1,null,null,null);v.options.__file="components/grid/demo/basic.md";var _=v.exports,c=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <p>Align Top</p>\n <a-row type="flex" justify="center" align="top">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n\n <p>Align Center</p>\n <a-row type="flex" justify="space-around" align="middle">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n\n <p>Align Bottom</p>\n <a-row type="flex" justify="space-between" align="bottom">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Flex Alignment\nFlex child elements vertically aligned.\n",cn:"\n#### Flex 对齐\nFlex 子元素垂直对齐。\n",sourceCode:'<template>\n <div>\n <p>Align Top</p>\n <a-row type="flex" justify="center" align="top">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n\n <p>Align Center</p>\n <a-row type="flex" justify="space-around" align="middle">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n\n <p>Align Bottom</p>\n <a-row type="flex" justify="space-between" align="bottom">\n <a-col :span="4"><p class="height-100">col-4</p></a-col>\n <a-col :span="4"><p class="height-50">col-4</p></a-col>\n <a-col :span="4"><p class="height-120">col-4</p></a-col>\n <a-col :span="4"><p class="height-80">col-4</p></a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("p",[s._v("Align Top")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"center",align:"top"}},[t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-100"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-50"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-120"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-80"},[s._v("col-4")])])],1),s._v(" "),t("p",[s._v("Align Center")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"space-around",align:"middle"}},[t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-100"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-50"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-120"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-80"},[s._v("col-4")])])],1),s._v(" "),t("p",[s._v("Align Bottom")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"space-between",align:"bottom"}},[t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-100"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-50"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-120"},[s._v("col-4")])]),s._v(" "),t("a-col",{attrs:{span:4}},[t("p",{staticClass:"height-80"},[s._v("col-4")])])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"Flex-对齐"}},[s._v("Flex 对齐 "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-对齐"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Flex 子元素垂直对齐。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Flex-Alignment"}},[s._v("Flex Alignment "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-Alignment"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Flex child elements vertically aligned.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Align Top"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-100"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-50"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-120"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-80"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Align Center"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"middle"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-100"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-50"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-120"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-80"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Align Bottom"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-100"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-50"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-120"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height-80"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};c._withStripped=!0;var e=Object(n.a)({},c,[],!1,null,null,null);e.options.__file="components/grid/demo/flex-align.md";var o=e.exports,i=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-row type="flex">\n <a-col :span="6" :order="4">1 col-order-4</a-col>\n <a-col :span="6" :order="3">2 col-order-3</a-col>\n <a-col :span="6" :order="2">3 col-order-2</a-col>\n <a-col :span="6" :order="1">4 col-order-1</a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Flex Order\nTo change the element sort by Flex layout order.\n",cn:"\n#### Flex 排序\n从堆叠到水平排列。\n通过 Flex 布局的 Order 来改变元素的排序。\n",sourceCode:'<template>\n <div>\n <a-row type="flex">\n <a-col :span="6" :order="4">1 col-order-4</a-col>\n <a-col :span="6" :order="3">2 col-order-3</a-col>\n <a-col :span="6" :order="2">3 col-order-2</a-col>\n <a-col :span="6" :order="1">4 col-order-1</a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-row",{attrs:{type:"flex"}},[t("a-col",{attrs:{span:6,order:4}},[s._v("1 col-order-4")]),s._v(" "),t("a-col",{attrs:{span:6,order:3}},[s._v("2 col-order-3")]),s._v(" "),t("a-col",{attrs:{span:6,order:2}},[s._v("3 col-order-2")]),s._v(" "),t("a-col",{attrs:{span:6,order:1}},[s._v("4 col-order-1")])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"Flex-排序"}},[s._v("Flex 排序 "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-排序"}},[s._v("#")])]),s._v(" "),t("p",[s._v("从堆叠到水平排列。"),t("br"),s._v("\n通过 Flex 布局的 Order 来改变元素的排序。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Flex-Order"}},[s._v("Flex Order "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-Order"}},[s._v("#")])]),s._v(" "),t("p",[s._v("To change the element sort by Flex layout order.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":order")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("1 col-order-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":order")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("2 col-order-3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":order")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("3 col-order-2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":order")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("4 col-order-1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};i._withStripped=!0;var p=Object(n.a)({},i,[],!1,null,null,null);p.options.__file="components/grid/demo/flex-order.md";var r=p.exports,h=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <p>sub-element align left</p>\n <a-row type="flex" justify="start">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align center</p>\n <a-row type="flex" justify="center">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align right</p>\n <a-row type="flex" justify="end">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element monospaced arrangement</p>\n <a-row type="flex" justify="space-between">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align full</p>\n <a-row type="flex" justify="space-around">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Flex Layout\nUse `row-flex` define `flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.\n",cn:"\n#### Flex 布局\nFlex 布局基础。\n使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。\n",sourceCode:'<template>\n <div>\n <p>sub-element align left</p>\n <a-row type="flex" justify="start">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align center</p>\n <a-row type="flex" justify="center">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align right</p>\n <a-row type="flex" justify="end">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element monospaced arrangement</p>\n <a-row type="flex" justify="space-between">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n\n <p>sub-element align full</p>\n <a-row type="flex" justify="space-around">\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n <a-col :span="4">col-4</a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("p",[s._v("sub-element align left")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"start"}},[t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")])],1),s._v(" "),t("p",[s._v("sub-element align center")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"center"}},[t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")])],1),s._v(" "),t("p",[s._v("sub-element align right")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"end"}},[t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")])],1),s._v(" "),t("p",[s._v("sub-element monospaced arrangement")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"space-between"}},[t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")])],1),s._v(" "),t("p",[s._v("sub-element align full")]),s._v(" "),t("a-row",{attrs:{type:"flex",justify:"space-around"}},[t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")]),s._v(" "),t("a-col",{attrs:{span:4}},[s._v("col-4")])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"Flex-布局"}},[s._v("Flex 布局 "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-布局"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Flex 布局基础。"),t("br"),s._v("\n使用 "),t("code",[s._v("row-flex")]),s._v(" 定义 "),t("code",[s._v("flex")]),s._v(" 布局，其子元素根据不同的值 "),t("code",[s._v("start")]),s._v(","),t("code",[s._v("center")]),s._v(","),t("code",[s._v("end")]),s._v(","),t("code",[s._v("space-between")]),s._v(","),t("code",[s._v("space-around")]),s._v("，分别定义其在父节点里面的排版方式。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Flex-Layout"}},[s._v("Flex Layout "),t("a",{staticClass:"anchor",attrs:{href:"#Flex-Layout"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Use "),t("code",[s._v("row-flex")]),s._v(" define "),t("code",[s._v("flex")]),s._v(" layout, its child elements depending on the value of the "),t("code",[s._v("start")]),s._v(","),t("code",[s._v(" center")]),s._v(", "),t("code",[s._v("end")]),s._v(","),t("code",[s._v(" space-between")]),s._v(", "),t("code",[s._v("space-around")]),s._v(", which are defined in its parent node layout mode.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("sub-element align left"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"start"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("sub-element align center"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("sub-element align right"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("sub-element monospaced arrangement"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("sub-element align full"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("col-4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};h._withStripped=!0;var C=Object(n.a)({},h,[],!1,null,null,null);C.options.__file="components/grid/demo/flex.md";var j=C.exports,d=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div class="gutter-example">\n <a-row :gutter="16">\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Grid Gutter\nYou can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)\nYou can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.\n",cn:"\n#### 区块间隔\n栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)\n如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。\n",sourceCode:'<template>\n <div class="gutter-example">\n <a-row :gutter="16">\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n <a-col class="gutter-row" :span="6">\n <div class="gutter-box">col-6</div>\n </a-col>\n </a-row>\n </div>\n</template>\n<style scoped>\n .gutter-example >>> .ant-row > div {\n background: transparent;\n border: 0;\n }\n .gutter-box {\n background: #00a0e9;\n padding: 5px 0;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{staticClass:"gutter-example"},[t("a-row",{attrs:{gutter:16}},[t("a-col",{staticClass:"gutter-row",attrs:{span:6}},[t("div",{staticClass:"gutter-box"},[s._v("col-6")])]),s._v(" "),t("a-col",{staticClass:"gutter-row",attrs:{span:6}},[t("div",{staticClass:"gutter-box"},[s._v("col-6")])]),s._v(" "),t("a-col",{staticClass:"gutter-row",attrs:{span:6}},[t("div",{staticClass:"gutter-box"},[s._v("col-6")])]),s._v(" "),t("a-col",{staticClass:"gutter-row",attrs:{span:6}},[t("div",{staticClass:"gutter-box"},[s._v("col-6")])])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"区块间隔"}},[s._v("区块间隔 "),t("a",{staticClass:"anchor",attrs:{href:"#区块间隔"}},[s._v("#")])]),s._v(" "),t("p",[s._v("栅格常常需要和间隔进行配合，你可以使用 "),t("code",[s._v("Row")]),s._v(" 的 "),t("code",[s._v("gutter")]),s._v(" 属性，我们推荐使用 "),t("code",[s._v("(16+8n)px")]),s._v(" 作为栅格间隔。(n 是自然数)"),t("br"),s._v("\n如果要支持响应式，可以写成 "),t("code",[s._v("{ xs: 8, sm: 16, md: 24, lg: 32 }")]),s._v("。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Grid-Gutter"}},[s._v("Grid Gutter "),t("a",{staticClass:"anchor",attrs:{href:"#Grid-Gutter"}},[s._v("#")])]),s._v(" "),t("p",[s._v("You can use the "),t("code",[s._v("gutter")]),s._v(" property of "),t("code",[s._v("Row")]),s._v(" as grid spacing, we recommend set it to "),t("code",[s._v("(16 + 8n) px")]),s._v(". ("),t("code",[s._v("n")]),s._v(" stands for natural number.)"),t("br"),s._v("\nYou can set it to a object like "),t("code",[s._v("{ xs: 8, sm: 16, md: 24, lg: 32 }")]),s._v(" for responsive design."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-example"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-row"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-box"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-row"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-box"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-row"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-box"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-row"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutter-box"')]),s._v(">")]),s._v("col-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".gutter-example")]),s._v(" >>> "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-row")]),s._v(" > "),t("span",{staticClass:"hljs-selector-tag"},[s._v("div")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": transparent;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-class"},[s._v(".gutter-box")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#00a0e9")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};d._withStripped=!0;t(1297);var g=Object(n.a)({},d,[],!1,null,"ec2515f8",null);g.options.__file="components/grid/demo/gutter.md";var m=g.exports,u=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-row>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8" :offset="8">col-8</a-col>\n </a-row>\n <a-row>\n <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>\n <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>\n </a-row>\n <a-row>\n <a-col :span="12" :offset="6">col-12 col-offset-6</a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### a-column offset\n`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.\n",cn:'\n#### 左右偏移\n列偏移。\n使用 `offset` 可以将列向右侧偏。例如，`:offset="4"` 将元素向右侧偏移了 4 个列（column）的宽度。\n',sourceCode:'<template>\n <div>\n <a-row>\n <a-col :span="8">col-8</a-col>\n <a-col :span="8" :offset="8">col-8</a-col>\n </a-row>\n <a-row>\n <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>\n <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>\n </a-row>\n <a-row>\n <a-col :span="12" :offset="6">col-12 col-offset-6</a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-row",[t("a-col",{attrs:{span:8}},[s._v("col-8")]),s._v(" "),t("a-col",{attrs:{span:8,offset:8}},[s._v("col-8")])],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:6,offset:6}},[s._v("col-6 col-offset-6")]),s._v(" "),t("a-col",{attrs:{span:6,offset:6}},[s._v("col-6 col-offset-6")])],1),s._v(" "),t("a-row",[t("a-col",{attrs:{span:12,offset:6}},[s._v("col-12 col-offset-6")])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"左右偏移"}},[s._v("左右偏移 "),t("a",{staticClass:"anchor",attrs:{href:"#左右偏移"}},[s._v("#")])]),s._v(" "),t("p",[s._v("列偏移。"),t("br"),s._v("\n使用 "),t("code",[s._v("offset")]),s._v(" 可以将列向右侧偏。例如，"),t("code",[s._v(':offset="4"')]),s._v(" 将元素向右侧偏移了 4 个列（column）的宽度。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"a-column-offset"}},[s._v("a-column offset "),t("a",{staticClass:"anchor",attrs:{href:"#a-column-offset"}},[s._v("#")])]),s._v(" "),t("p",[t("code",[s._v("Offset")]),s._v(" can set the column to the right side. For example, using "),t("code",[s._v("offset = {4}")]),s._v(" can set the element shifted to the right four columns width.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("col-8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("col-8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6 col-offset-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-6 col-offset-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-12 col-offset-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};u._withStripped=!0;var f=Object(n.a)({},u,[],!1,null,null,null);f.options.__file="components/grid/demo/offset.md";var x=f.exports,w=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-row>\n <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n </a-row>\n',script:null,style:null,us:'\n#### More responsive\n`span` `pull` `push` `offset` `order` property can be embedded into `xs` `sm` `md` `lg` `xl` properties to use,\nwhere `:xs="6"` is equivalent to `:xs="{span: 6}"`.\n',cn:'\n#### 其他属性的响应式\n`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。\n其中 `:xs="6"` 相当于 `:xs="{ span: 6 }"`。\n',sourceCode:'<template>\n <a-row>\n <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>\n </a-row>\n</template>\n'}}},[t("template",{slot:"component"},[t("a-row",[t("a-col",{attrs:{xs:{span:5,offset:1},lg:{span:6,offset:2}}},[s._v("Col")]),s._v(" "),t("a-col",{attrs:{xs:{span:11,offset:1},lg:{span:6,offset:2}}},[s._v("Col")]),s._v(" "),t("a-col",{attrs:{xs:{span:5,offset:1},lg:{span:6,offset:2}}},[s._v("Col")])],1)],1),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"其他属性的响应式"}},[s._v("其他属性的响应式 "),t("a",{staticClass:"anchor",attrs:{href:"#其他属性的响应式"}},[s._v("#")])]),s._v(" "),t("p",[t("code",[s._v("span")]),s._v(" "),t("code",[s._v("pull")]),s._v(" "),t("code",[s._v("push")]),s._v(" "),t("code",[s._v("offset")]),s._v(" "),t("code",[s._v("order")]),s._v(" 属性可以通过内嵌到 "),t("code",[s._v("xs")]),s._v(" "),t("code",[s._v("sm")]),s._v(" "),t("code",[s._v("md")]),s._v(" "),t("code",[s._v("lg")]),s._v(" "),t("code",[s._v("xl")]),s._v(" "),t("code",[s._v("xxl")]),s._v(" 属性中来使用。"),t("br"),s._v("\n其中 "),t("code",[s._v(':xs="6"')]),s._v(" 相当于 "),t("code",[s._v(':xs="{ span: 6 }"')]),s._v("。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"More-responsive"}},[s._v("More responsive "),t("a",{staticClass:"anchor",attrs:{href:"#More-responsive"}},[s._v("#")])]),s._v(" "),t("p",[t("code",[s._v("span")]),s._v(" "),t("code",[s._v("pull")]),s._v(" "),t("code",[s._v("push")]),s._v(" "),t("code",[s._v("offset")]),s._v(" "),t("code",[s._v("order")]),s._v(" property can be embedded into "),t("code",[s._v("xs")]),s._v(" "),t("code",[s._v("sm")]),s._v(" "),t("code",[s._v("md")]),s._v(" "),t("code",[s._v("lg")]),s._v(" "),t("code",[s._v("xl")]),s._v(" properties to use,"),t("br"),s._v("\nwhere "),t("code",[s._v(':xs="6"')]),s._v(" is equivalent to "),t("code",[s._v(':xs="{span: 6}"')]),s._v("."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 5, offset: 1 }"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 6, offset: 2 }"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 11, offset: 1 }"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 6, offset: 2 }"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 5, offset: 1 }"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"{ span: 6, offset: 2 }"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};w._withStripped=!0;var b=Object(n.a)({},w,[],!1,null,null,null);b.options.__file="components/grid/demo/responsive-more.md";var y=b.exports,k=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-row>\n <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>\n <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>\n <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>\n </a-row>\n',script:null,style:null,us:"\n#### 响应式布局\nReferring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: `xs` `sm` `md` `lg` `xl`.\n",cn:"\n#### 响应式布局\n参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。\n",sourceCode:'<template>\n <a-row>\n <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>\n <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>\n <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>\n </a-row>\n</template>\n'}}},[t("template",{slot:"component"},[t("a-row",[t("a-col",{attrs:{xs:2,sm:4,md:6,lg:8,xl:10}},[s._v("Col")]),s._v(" "),t("a-col",{attrs:{xs:20,sm:16,md:12,lg:8,xl:4}},[s._v("Col")]),s._v(" "),t("a-col",{attrs:{xs:2,sm:4,md:6,lg:8,xl:10}},[s._v("Col")])],1)],1),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"响应式布局"}},[s._v("响应式布局 "),t("a",{staticClass:"anchor",attrs:{href:"#响应式布局"}},[s._v("#")])]),s._v(" "),t("p",[s._v("参照 Bootstrap 的 "),t("a",{attrs:{href:"http://getbootstrap.com/css/#grid-media-queries"}},[s._v("响应式设计")]),s._v("，预设六个响应尺寸："),t("code",[s._v("xs")]),s._v(" "),t("code",[s._v("sm")]),s._v(" "),t("code",[s._v("md")]),s._v(" "),t("code",[s._v("lg")]),s._v(" "),t("code",[s._v("xl")]),s._v(" "),t("code",[s._v("xxl")]),s._v("。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"响应式布局"}},[s._v("响应式布局 "),t("a",{staticClass:"anchor",attrs:{href:"#响应式布局"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset six dimensions: "),t("code",[s._v("xs")]),s._v(" "),t("code",[s._v("sm")]),s._v(" "),t("code",[s._v("md")]),s._v(" "),t("code",[s._v("lg")]),s._v(" "),t("code",[s._v("xl")]),s._v(".")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xl")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xl")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":xl")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Col"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};k._withStripped=!0;var F=Object(n.a)({},k,[],!1,null,null,null);F.options.__file="components/grid/demo/responsive.md";var K=F.exports,R=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-row>\n <a-col :span="18" :push="6">col-18 col-push-6</a-col>\n <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>\n </a-row>\n </div>\n',script:null,style:null,us:"\n#### Grid sort\nBy using `push` and` pull` class you can easily change column order.\n",cn:"\n#### 栅格排序\n列排序。\n通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。\n",sourceCode:'<template>\n <div>\n <a-row>\n <a-col :span="18" :push="6">col-18 col-push-6</a-col>\n <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>\n </a-row>\n </div>\n</template>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-row",[t("a-col",{attrs:{span:18,push:6}},[s._v("col-18 col-push-6")]),s._v(" "),t("a-col",{attrs:{span:6,pull:18}},[s._v("col-6 col-pull-18")])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"栅格排序"}},[s._v("栅格排序 "),t("a",{staticClass:"anchor",attrs:{href:"#栅格排序"}},[s._v("#")])]),s._v(" "),t("p",[s._v("列排序。"),t("br"),s._v("\n通过使用 "),t("code",[s._v("push")]),s._v(" 和 "),t("code",[s._v("pull")]),s._v(" 类就可以很容易的改变列（column）的顺序。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Grid-sort"}},[s._v("Grid sort "),t("a",{staticClass:"anchor",attrs:{href:"#Grid-sort"}},[s._v("#")])]),s._v(" "),t("p",[s._v("By using "),t("code",[s._v("push")]),s._v(" and"),t("code",[s._v(" pull")]),s._v(" class you can easily change column order.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":push")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("col-18 col-push-6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":pull")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(">")]),s._v("col-6 col-pull-18"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])],2)]],2)};R._withStripped=!0;var O=Object(n.a)({},R,[],!1,null,null,null);O.options.__file="components/grid/demo/sort.md";var A=O.exports,G=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-grid-demo-playground">\n <div style="marginBottom:16px">\n <span style="marginRight:6px">Gutter (px): </span>\n <div style="width:50%">\n <a-slider :min="0" :max="Object.keys(gutters).length - 1" v-model="gutterKey" :marks="this.gutters" :step="null"/>\n </div>\n <span style="marginRight:6px">Column Count:</span>\n <div style="width:50%">\n <a-slider :min="0" :max="Object.keys(colCounts).length - 1" v-model="colCountKey" :marks="this.colCounts" :step="null"/>\n </div>\n </div>\n <a-row :gutter="gutters[gutterKey]">\n <a-col v-for="(item, index) in colCounts[colCountKey]" :key="item.toString()" :span="24/colCounts[colCountKey]">\n <div>Column</div>\n </a-col>\n </a-row>\n <pre v-text="rowColHtml"/>\n </div>\n',script:"\n export default {\n data() {\n const gutters = {};\n const arr = [8, 16, 24, 32, 40, 48];\n arr.forEach((value, i) => {\n gutters[i] = value;\n });\n const colCounts = {};\n const arr1 = [2, 3, 4, 6, 8, 12];\n arr1.forEach((value, i) => {\n colCounts[i] = value;\n });\n return {\n gutterKey: 1,\n colCountKey: 2,\n colCounts,\n gutters,\n };\n },\n computed: {\n rowColHtml() {\n const colCount = this.colCounts[this.colCountKey];\n const getter = this.gutters[this.gutterKey];\n let colCode = '<Row :gutter=\"' + getter + '\">\\n';\n for (let i = 0; i < colCount; i++) {\n const spanNum = 24 / colCount;\n colCode += ' <Col :span=\"' + spanNum + '\"/>\\n';\n }\n colCode += '</Row>';\n return colCode;\n },\n },\n };\n",style:null,us:"\n#### Playground\nA simple playground for column count and gutter.\n",cn:"\n#### 栅格配置器\n可以简单配置几种等分栅格和间距。\n",sourceCode:'<template>\n <div id="components-grid-demo-playground">\n <div style="marginBottom:16px">\n <span style="marginRight:6px">Gutter (px): </span>\n <div style="width:50%">\n <a-slider\n :min="0"\n :max="Object.keys(gutters).length - 1"\n v-model="gutterKey"\n :marks="this.gutters"\n :step="null"\n />\n </div>\n <span style="marginRight:6px">Column Count:</span>\n <div style="width:50%">\n <a-slider\n :min="0"\n :max="Object.keys(colCounts).length - 1"\n v-model="colCountKey"\n :marks="this.colCounts"\n :step="null"\n />\n </div>\n </div>\n <a-row :gutter="gutters[gutterKey]">\n <a-col\n v-for="(item, index) in colCounts[colCountKey]"\n :key="item.toString()"\n :span="24/colCounts[colCountKey]"\n >\n <div>Column</div>\n </a-col>\n </a-row>\n <pre v-text="rowColHtml"></pre>\n </div>\n</template>\n<script>\n export default {\n data() {\n const gutters = {};\n const arr = [8, 16, 24, 32, 40, 48];\n arr.forEach((value, i) => {\n gutters[i] = value;\n });\n const colCounts = {};\n const arr1 = [2, 3, 4, 6, 8, 12];\n arr1.forEach((value, i) => {\n colCounts[i] = value;\n });\n return {\n gutterKey: 1,\n colCountKey: 2,\n colCounts,\n gutters,\n };\n },\n computed: {\n rowColHtml() {\n const colCount = this.colCounts[this.colCountKey];\n const getter = this.gutters[this.gutterKey];\n let colCode = \'<Row :gutter="\' + getter + \'">\\n\';\n for (let i = 0; i < colCount; i++) {\n const spanNum = 24 / colCount;\n colCode += \' <Col :span="\' + spanNum + \'"/>\\n\';\n }\n colCode += \'</Row>\';\n return colCode;\n },\n },\n };\n<\/script>\n<style scoped>\n #components-grid-demo-playground [class^=\'ant-col-\'] {\n background: transparent;\n border: 0;\n }\n #components-grid-demo-playground [class^=\'ant-col-\'] > div {\n background: #00a0e9;\n height: 120px;\n line-height: 120px;\n font-size: 13px;\n }\n #components-grid-demo-playground pre {\n background: #f9f9f9;\n border-radius: 6px;\n font-size: 13px;\n padding: 8px 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{attrs:{id:"components-grid-demo-playground"}},[t("div",{staticStyle:{marginBottom:"16px"}},[t("span",{staticStyle:{marginRight:"6px"}},[s._v("Gutter (px): ")]),s._v(" "),t("div",{staticStyle:{width:"50%"}},[t("a-slider",{attrs:{min:0,max:Object.keys(s.gutters).length-1,marks:this.gutters,step:null},model:{value:s.gutterKey,callback:function(a){s.gutterKey=a},expression:"gutterKey"}})],1),s._v(" "),t("span",{staticStyle:{marginRight:"6px"}},[s._v("Column Count:")]),s._v(" "),t("div",{staticStyle:{width:"50%"}},[t("a-slider",{attrs:{min:0,max:Object.keys(s.colCounts).length-1,marks:this.colCounts,step:null},model:{value:s.colCountKey,callback:function(a){s.colCountKey=a},expression:"colCountKey"}})],1)]),s._v(" "),t("a-row",{attrs:{gutter:s.gutters[s.gutterKey]}},s._l(s.colCounts[s.colCountKey],(function(a,l){return t("a-col",{key:a.toString(),attrs:{span:24/s.colCounts[s.colCountKey]}},[t("div",[s._v("Column")])])})),1),s._v(" "),t("pre",{domProps:{textContent:s._s(s.rowColHtml)}})],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"栅格配置器"}},[s._v("栅格配置器 "),t("a",{staticClass:"anchor",attrs:{href:"#栅格配置器"}},[s._v("#")])]),s._v(" "),t("p",[s._v("可以简单配置几种等分栅格和间距。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Playground"}},[s._v("Playground "),t("a",{staticClass:"anchor",attrs:{href:"#Playground"}},[s._v("#")])]),s._v(" "),t("p",[s._v("A simple playground for column count and gutter.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-grid-demo-playground"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginBottom:16px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginRight:6px"')]),s._v(">")]),s._v("Gutter (px): "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width:50%"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Object.keys(gutters).length - 1"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutterKey"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"this.gutters"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"marginRight:6px"')]),s._v(">")]),s._v("Column Count:"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width:50%"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-slider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Object.keys(colCounts).length - 1"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"colCountKey"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":marks")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"this.colCounts"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"gutters[gutterKey]"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"(item, index) in colCounts[colCountKey]"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.toString()"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"24/colCounts[colCountKey]"')]),s._v("\n >")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Column"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-col")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-row")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("pre")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-text")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"rowColHtml"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("pre")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" gutters = {};\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" arr = ["),t("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("16")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("32")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("48")]),s._v("];\n arr.forEach("),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("value, i")]),s._v(") =>")]),s._v(" {\n gutters[i] = value;\n });\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" colCounts = {};\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" arr1 = ["),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),t("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("];\n arr1.forEach("),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("value, i")]),s._v(") =>")]),s._v(" {\n colCounts[i] = value;\n });\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),t("span",{staticClass:"hljs-attr"},[s._v("gutterKey")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("colCountKey")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n colCounts,\n gutters,\n };\n },\n "),t("span",{staticClass:"hljs-attr"},[s._v("computed")]),s._v(": {\n rowColHtml() {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" colCount = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".colCounts["),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".colCountKey];\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" getter = "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".gutters["),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".gutterKey];\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" colCode = "),t("span",{staticClass:"hljs-string"},[s._v("'<Row :gutter=\"'")]),s._v(" + getter + "),t("span",{staticClass:"hljs-string"},[s._v("'\">\\n'")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("; i < colCount; i++) {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" spanNum = "),t("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" / colCount;\n colCode += "),t("span",{staticClass:"hljs-string"},[s._v("' <Col :span=\"'")]),s._v(" + spanNum + "),t("span",{staticClass:"hljs-string"},[s._v("'\"/>\\n'")]),s._v(";\n }\n colCode += "),t("span",{staticClass:"hljs-string"},[s._v("'</Row>'")]),s._v(";\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" colCode;\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("scoped")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-grid-demo-playground")]),s._v(" "),t("span",{staticClass:"hljs-selector-attr"},[s._v("[class^='ant-col-']")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": transparent;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-grid-demo-playground")]),s._v(" "),t("span",{staticClass:"hljs-selector-attr"},[s._v("[class^='ant-col-']")]),s._v(" > "),t("span",{staticClass:"hljs-selector-tag"},[s._v("div")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#00a0e9")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-grid-demo-playground")]),s._v(" "),t("span",{staticClass:"hljs-selector-tag"},[s._v("pre")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#f9f9f9")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("8px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};G._withStripped=!0;var S={data:function(){var s={};[8,16,24,32,40,48].forEach((function(a,t){s[t]=a}));var a={};return[2,3,4,6,8,12].forEach((function(s,t){a[t]=s})),{gutterKey:1,colCountKey:2,colCounts:a,gutters:s}},computed:{rowColHtml:function(){for(var s=this.colCounts[this.colCountKey],a='<Row :gutter="'+this.gutters[this.gutterKey]+'">\n',t=0;t<s;t++){a+=' <Col :span="'+24/s+'"/>\n'}return a+="</Row>"}}},E=(t(1298),Object(n.a)(S,G,[],!1,null,"23510863",null));E.options.__file="components/grid/demo/playfround.md";var B=E.exports,z=function(){var s=this.$createElement;this._self._c;return this._m(0)};z._withStripped=!0;var $=Object(n.a)({},z,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"Row"}},[s._v("Row "),t("a",{staticClass:"anchor",attrs:{href:"#Row"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("成员")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("align")]),s._v(" "),t("td",[s._v("flex 布局下的垂直对齐方式："),t("code",{pre:!0},[s._v("top")]),s._v(" "),t("code",{pre:!0},[s._v("middle")]),s._v(" "),t("code",{pre:!0},[s._v("bottom")])]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("top")])])]),s._v(" "),t("tr",[t("td",[s._v("gutter")]),s._v(" "),t("td",[s._v("栅格间隔，可以写成像素值或支持响应式的对象写法 "),t("code",{pre:!0},[s._v("{ xs: 8, sm: 16, md: 24}")])]),s._v(" "),t("td",[s._v("number/object")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("justify")]),s._v(" "),t("td",[s._v("flex 布局下的水平排列方式："),t("code",{pre:!0},[s._v("start")]),s._v(" "),t("code",{pre:!0},[s._v("end")]),s._v(" "),t("code",{pre:!0},[s._v("center")]),s._v(" "),t("code",{pre:!0},[s._v("space-around")]),s._v(" "),t("code",{pre:!0},[s._v("space-between")])]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("start")])])]),s._v(" "),t("tr",[t("td",[s._v("type")]),s._v(" "),t("td",[s._v("布局模式，可选 "),t("code",{pre:!0},[s._v("flex")]),s._v("，"),t("a",{attrs:{href:"http://caniuse.com/#search=flex"}},[s._v("现代浏览器")]),s._v(" 下有效")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"Col"}},[s._v("Col "),t("a",{staticClass:"anchor",attrs:{href:"#Col"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("成员")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("offset")]),s._v(" "),t("td",[s._v("栅格左侧的间隔格数，间隔内不可以有栅格")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("order")]),s._v(" "),t("td",[s._v("栅格顺序，"),t("code",{pre:!0},[s._v("flex")]),s._v(" 布局模式下有效")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("pull")]),s._v(" "),t("td",[s._v("栅格向左移动格数")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("push")]),s._v(" "),t("td",[s._v("栅格向右移动格数")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("span")]),s._v(" "),t("td",[s._v("栅格占位格数，为 0 时相当于 "),t("code",{pre:!0},[s._v("display: none")])]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("xs")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("<576px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("sm")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥576px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("md")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥768px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("lg")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥992px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("xl")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥1200px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("xxl")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥1600px")]),s._v(" 响应式栅格，可为栅格数或一个包含其他属性的对象")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])])])]),s._v(" "),t("p",[s._v("响应式栅格的断点扩展自 "),t("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints"}},[s._v("BootStrap 4 的规则")]),s._v("（不包含链接里 "),t("code",{pre:!0},[s._v("occasionally")]),s._v(" 的部分)。")])])}],!1,null,null,null);$.options.__file="components/grid/index.zh-CN.md";var P=$.exports,T=function(){var s=this.$createElement;this._self._c;return this._m(0)};T._withStripped=!0;var q=Object(n.a)({},T,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("h3",{attrs:{id:"Row"}},[s._v("Row "),t("a",{staticClass:"anchor",attrs:{href:"#Row"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("align")]),s._v(" "),t("td",[s._v("the vertical alignment of the flex layout: "),t("code",{pre:!0},[s._v("top")]),s._v(" "),t("code",{pre:!0},[s._v("middle")]),s._v(" "),t("code",{pre:!0},[s._v("bottom")])]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("top")])])]),s._v(" "),t("tr",[t("td",[s._v("gutter")]),s._v(" "),t("td",[s._v("spacing between grids, could be a number or a object like "),t("code",{pre:!0},[s._v("{ xs: 8, sm: 16, md: 24}")])]),s._v(" "),t("td",[s._v("number/object")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("justify")]),s._v(" "),t("td",[s._v("horizontal arrangement of the flex layout: "),t("code",{pre:!0},[s._v("start")]),s._v(" "),t("code",{pre:!0},[s._v("end")]),s._v(" "),t("code",{pre:!0},[s._v("center")]),s._v(" "),t("code",{pre:!0},[s._v("space-around")]),s._v(" "),t("code",{pre:!0},[s._v("space-between")])]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("start")])])]),s._v(" "),t("tr",[t("td",[s._v("type")]),s._v(" "),t("td",[s._v("layout mode, optional "),t("code",{pre:!0},[s._v("flex")]),s._v(", "),t("a",{attrs:{href:"http://caniuse.com/#search=flex"}},[s._v("browser support")])]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"Col"}},[s._v("Col "),t("a",{staticClass:"anchor",attrs:{href:"#Col"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("offset")]),s._v(" "),t("td",[s._v("the number of cells to offset Col from the left")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("order")]),s._v(" "),t("td",[s._v("raster order, used in "),t("code",{pre:!0},[s._v("flex")]),s._v(" layout mode")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("pull")]),s._v(" "),t("td",[s._v("the number of cells that raster is moved to the left")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("push")]),s._v(" "),t("td",[s._v("the number of cells that raster is moved to the right")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("span")]),s._v(" "),t("td",[s._v("raster number of cells to occupy, 0 corresponds to "),t("code",{pre:!0},[s._v("display: none")])]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("none")])]),s._v(" "),t("tr",[t("td",[s._v("xs")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("<576px")]),s._v(" and also default setting, could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("sm")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥576px")]),s._v(", could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("md")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥768px")]),s._v(", could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("lg")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥992px")]),s._v(", could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("xl")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥1200px")]),s._v(", could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("xxl")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("≥1600px")]),s._v(", could be a "),t("code",{pre:!0},[s._v("span")]),s._v(" value or an object containing above props")]),s._v(" "),t("td",[s._v("number|object")]),s._v(" "),t("td",[s._v("-")])])])]),s._v(" "),t("p",[s._v("The breakpoints of responsive grid follow "),t("a",{attrs:{href:"https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints"}},[s._v("BootStrap 4 media queries rules")]),s._v("(not including "),t("code",{pre:!0},[s._v("occasionally part")]),s._v(").")])])}],!1,null,null,null);q.options.__file="components/grid/index.en-US.md";var I=q.exports,H="# Grid 栅格\n 24 栅格系统。\n ## 设计理念\n ",Y="# Grid\n24 Grids System。\n## Design concept",D="\n 在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。\n划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。\n## 概述\n布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：\n- 通过`row`在水平方向建立一组`column`（简写col）\n- 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素\n- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建\n- 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列\n## Flex 布局\n我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。\nFlex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。\n ## 代码演示\n ",N="\n In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 aliquots.\n\nWe name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit.\n\n## Outline\n\nIn the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement.\n\nFollowing is a brief look at how it works:\n\n- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)\n- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`\n- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).\n- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.\n\n## Flex layout\nOur 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`.\nFlex layout uses a 24 grid layout to define the width of each \"box\", but does not rigidly adhere to the grid layout.\n## Examples\n ",L={category:"Components",subtitle:"栅格",type:"Layout",zhType:"布局",cols:1,title:"Grid",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:H,us:Y}}),s("div",{class:"grid-demo"},[s("div",{class:"ant-row demo-row"},[s("div",{class:"ant-col-24 demo-col demo-col-1"},["100%"])]),s("div",{class:"ant-row demo-row"},[s("div",{class:"ant-col-6 demo-col demo-col-2"},["25%"]),s("div",{class:"ant-col-6 demo-col demo-col-3"},["25%"]),s("div",{class:"ant-col-6 demo-col demo-col-2"},["25%"]),s("div",{class:"ant-col-6 demo-col demo-col-3"},["25%"])]),s("div",{class:"ant-row demo-row"},[s("div",{class:"ant-col-8 demo-col demo-col-4"},["33.33%"]),s("div",{class:"ant-col-8 demo-col demo-col-5"},["33.33%"]),s("div",{class:"ant-col-8 demo-col demo-col-4"},["33.33%"])]),s("div",{class:"ant-row demo-row"},[s("div",{class:"ant-col-12 demo-col demo-col-1"},["50%"]),s("div",{class:"ant-col-12 demo-col demo-col-3"},["50%"])]),s("div",{class:"ant-row demo-row"},[s("div",{class:"ant-col-16 demo-col demo-col-4"},["66.66%"]),s("div",{class:"ant-col-8 demo-col demo-col-5"},["33.33%"])])]),s("md",{attrs:{cn:D,us:N}}),s("div",{attrs:{id:"components-grid-demo-all"}},[s(_),s(o),s(r),s(j),s(m),s(x),s(y),s(K),s(A),s(B)]),s("api",[s(P,{slot:"cn"}),s(I)])])}},M=Object(n.a)(L,void 0,void 0,!1,null,null,null);M.options.__file="components/grid/demo/index.vue";a.default=M.exports}}]); |