i-rubik/demo/js/15.e9260.js

A Vue.js 2.0+ UI Components Framework

webpackJsonp([15,29],{235:function(t,r,a){a(309);var e=a(0)(a(262),a(332),"data-v-489a9cb0",null);t.exports=e.exports},262:function(t,r,a){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default={name:"grid"}},286:function(t,r,a){r=t.exports=a(59)(),r.push([t.i,".row[data-v-489a9cb0]{margin-bottom:20px}li[data-v-489a9cb0]{margin-left:20px;list-style:circle}li p[data-v-489a9cb0]{margin-bottom:5px}.card[data-v-489a9cb0]{font-size:1.3rem;text-align:center;color:#fff;padding:1.5rem 0;margin:.5rem 0}.card-text[data-v-489a9cb0]{padding:0}","",{version:3,sources:["/./example/views/Grid.vue"],names:[],mappings:"AACA,sBACE,kBAAoB,CACrB,AACD,oBACE,iBAAkB,AAClB,iBAAmB,CACpB,AACD,sBACE,iBAAmB,CACpB,AACD,uBACE,iBAAkB,AAClB,kBAAmB,AACnB,WAAY,AACZ,iBAAkB,AAClB,cAAiB,CAClB,AACD,4BACE,SAAW,CACZ",file:"Grid.vue",sourcesContent:["\n.row[data-v-489a9cb0] {\n  margin-bottom: 20px;\n}\nli[data-v-489a9cb0] {\n  margin-left: 20px;\n  list-style: circle;\n}\nli p[data-v-489a9cb0] {\n  margin-bottom: 5px;\n}\n.card[data-v-489a9cb0] {\n  font-size: 1.3rem;\n  text-align: center;\n  color: #fff;\n  padding: 1.5rem 0;\n  margin: 0.5rem 0;\n}\n.card-text[data-v-489a9cb0] {\n  padding: 0;\n}"],sourceRoot:"webpack://"}])},309:function(t,r,a){var e=a(286);"string"==typeof e&&(e=[[t.i,e,""]]),e.locals&&(t.exports=e.locals);a(226)("4354dfe7",e,!0)},332:function(t,r){t.exports={render:function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("article",[a("h1",[t._v("栅格 Grid")]),t._v(" "),a("p",[t._v("\n    这里采用比较灵活的12栅格系统，支持常见的 1 2 3 4 6 列布局。\n  ")]),t._v(" "),t._m(0),t._v(" "),a("h2",[t._v("Flex 布局")]),t._v(" "),t._m(1),t._v(" "),a("r-row",[a("r-col",{attrs:{xs12:""}},[a("r-card",{staticClass:"blue"},[a("r-card-text",[t._v("12")])],1)],1),t._v(" "),a("r-col",{attrs:{xs6:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("6")])],1)],1),t._v(" "),a("r-col",{attrs:{xs6:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("6")])],1)],1),t._v(" "),a("r-col",{attrs:{xs4:""}},[a("r-card",{staticClass:"blue"},[a("r-card-text",[t._v("4")])],1)],1),t._v(" "),a("r-col",{attrs:{xs4:""}},[a("r-card",{staticClass:"blue"},[a("r-card-text",[t._v("4")])],1)],1),t._v(" "),a("r-col",{attrs:{xs4:""}},[a("r-card",{staticClass:"blue"},[a("r-card-text",[t._v("4")])],1)],1),t._v(" "),a("r-col",{attrs:{xs3:""}},[a("r-card",{staticClass:"green"},[a("r-card-text",[t._v("3")])],1)],1),t._v(" "),a("r-col",{attrs:{xs3:""}},[a("r-card",{staticClass:"green"},[a("r-card-text",[t._v("3")])],1)],1),t._v(" "),a("r-col",{attrs:{xs3:""}},[a("r-card",{staticClass:"green"},[a("r-card-text",[t._v("3")])],1)],1),t._v(" "),a("r-col",{attrs:{xs3:""}},[a("r-card",{staticClass:"green"},[a("r-card-text",[t._v("3")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1),t._v(" "),a("r-col",{attrs:{xs2:""}},[a("r-card",{staticClass:"pink"},[a("r-card-text",[t._v("2")])],1)],1)],1),t._v(" "),a("h2",[t._v("组件")]),t._v(" "),t._m(2),t._v(" "),a("p",[t._v("一般情况下 r-row 和 r-col 两个组件基本能满足布局需求")]),t._v(" "),a("h2",[t._v("API")]),t._v(" "),a("h3",[t._v("Container props")]),t._v(" "),t._m(3),t._v(" "),a("h3",[t._v("Row props")]),t._v(" "),t._m(4),t._v(" "),a("h3",[t._v("Col props")]),t._v(" "),t._m(5),t._v(" "),a("Markup",{attrs:{lang:"html"}},[t._v("\n    <r-row>\n      <r-col xs6>\n        ...\n      </r-col>\n      <r-col xs6>\n        ...\n      </r-col>\n    </r-row>\n  ")])],1)},staticRenderFns:[function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("ul",[a("li",[a("p",[t._v("使用 r-row 在水平方向建立一组 r-col ")])]),t._v(" "),a("li",[a("p",[t._v("内容放在 r-col 内")])]),t._v(" "),a("li",[a("p",[t._v("通过 r-col 的 xs[n] (xs1 ~ xs12) 来定义一个 r-col 跨越的范围")])]),t._v(" "),a("li",[a("p",[t._v("一个 r-row 中的 r-col 数量超过12会自动换行排列 ")])])])},function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("p",[t._v("\n    我们采用Flex布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。"),a("br"),t._v("\n    子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。\n  ")])},function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("table",{staticClass:"bordered responsive-table"},[a("thead",[a("th",[t._v("组件")]),t._v(" "),a("th",[t._v("说明")])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("<r-row>")]),t._v(" "),a("td",[t._v("一行")])]),t._v(" "),a("tr",[a("td",[t._v("<r-col>")]),t._v(" "),a("td",[t._v("一列")])]),t._v(" "),a("tr",[a("td",[t._v("<r-container>")]),t._v(" "),a("td",[t._v("栅格根组件 默认居中并带有padding")])]),t._v(" "),a("tr",[a("td",[t._v("<r-content>")]),t._v(" "),a("td",[t._v("栅格根组件 默认居中无padding")])]),t._v(" "),a("tr",[a("td",[t._v("<r-placeholder>")]),t._v(" "),a("td",[t._v("水平占位符 占据当前方向的剩余空间")])]),t._v(" "),a("tr",[a("td",[t._v("<r-col-placeholder>")]),t._v(" "),a("td",[t._v("垂直占位符 占据当前方向的剩余空间")])])])])},function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("table",{staticClass:"bordered responsive-table"},[a("thead",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("fluid")]),t._v(" "),a("td",[t._v("流式布局: <r-container fluid></r-container> ")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")])])])])},function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("table",{staticClass:"bordered responsive-table"},[a("thead",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("no-gutter")]),t._v(" "),a("td",[t._v("取消栅格间距")]),t._v(" "),a("td",[t._v("Boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("align")]),t._v(" "),a("td",[t._v("flex 布局下的垂直对齐方式，可选值为top、middle、bottom")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("justify")]),t._v(" "),a("td",[t._v("flex 布局下的水平排列方式，可选值为start、end、center、space-around、space-between")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("-")])])])])},function(){var t=this,r=t.$createElement,a=t._self._c||r;return a("table",{staticClass:"bordered responsive-table"},[a("thead",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("xs[n]")]),t._v(" "),a("td",[t._v("栅格跨越范围 n=[1~12]")]),t._v(" "),a("td",[t._v("String")]),t._v(" "),a("td",[t._v("-")])])])])}]}}});