fes.js/assets/js/57.5750a64c.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{595:function(t,a,l){"use strict";l.r(a);var s=l(46),e=Object(s.a)({},(function(){var t=this,a=t.$createElement,l=t._self._c||a;return l("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[l("h1",{attrs:{id:"layout-栅格"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#layout-栅格"}},[t._v("#")]),t._v(" Layout 栅格")]),t._v(" "),l("h2",{attrs:{id:"概述"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#概述"}},[t._v("#")]),t._v(" 概述")]),t._v(" "),l("ClientOnly",[l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"24"}},[t._v("span24: 100%")])],1),t._v(" "),l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"12"}},[t._v("span12: 50%")]),t._v(" "),l("cell",{attrs:{span:"12"}},[t._v("span12: 50%")])],1),t._v(" "),l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"8"}},[t._v("span8: 33.3333%")]),t._v(" "),l("cell",{attrs:{span:"8"}},[t._v("span8: 33.3333%")]),t._v(" "),l("cell",{attrs:{span:"8"}},[t._v("span8: 33.3333%")])],1),t._v(" "),l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"6"}},[t._v("span6: 25%")]),t._v(" "),l("cell",{attrs:{span:"6"}},[t._v("span6: 25%")]),t._v(" "),l("cell",{attrs:{span:"6"}},[t._v("span6: 25%")]),t._v(" "),l("cell",{attrs:{span:"6"}},[t._v("span6: 25%")])],1),t._v(" "),l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"8",offset:"8"}},[t._v("offset8 span8")])],1)],1),t._v(" "),l("p",[t._v("采用了24栅格的概念，相比Bootstrp的12格，它可以实现更精细的布局比例。解决常用的布局问题、对齐问题、宽度自适应等问题。")]),t._v(" "),l("p",[t._v("定义了两个概念，行Row和列Cell，具体使用方法如下：")]),t._v(" "),l("ul",[l("li",[t._v("使用 Row 在水平方向创建一行")]),t._v(" "),l("li",[t._v("将一组 Cell 插入 Row 中")]),t._v(" "),l("li",[t._v("在 Cell 写入自己的内容")]),t._v(" "),l("li",[t._v("通过设置 Cell 的span来控制 Cell 的宽度")]),t._v(" "),l("li",[t._v("通过设置 Cell 的offset来控制 Cell 往右的偏移")])]),t._v(" "),l("h2",{attrs:{id:"代码示例"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#代码示例"}},[t._v("#")]),t._v(" 代码示例")]),t._v(" "),l("ClientOnly",[l("row",[l("cell",{staticClass:"pr-20",attrs:{span:"12"}},[l("componetTemplate",{attrs:{title:"基础用法",template:"ui/templates/layout/1.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"24"}},[t._v("span24")])],1),t._v(" "),l("row",{staticClass:"article-row"},[l("cell",{attrs:{span:"12"}},[t._v("span12")]),t._v(" "),l("cell",{attrs:{span:"12"}},[t._v("span12")])],1)]},proxy:!0},{key:"description",fn:function(){return[l("p",[t._v("水平排列的布局，Cell必须放在Row里面")])]},proxy:!0}])})],1),t._v(" "),l("cell",{staticClass:"pl-20",attrs:{span:"12"}},[l("componetTemplate",{attrs:{title:"向右偏移",template:"ui/templates/layout/2.html"},scopedSlots:t._u([{key:"demo",fn:function(){return[l("Row",{staticClass:"article-row"},[l("Cell",{attrs:{span:"8",offset:"8"}},[t._v("span8|offset8")])],1),t._v(" "),l("Row",{staticClass:"article-row"},[l("Cell",{attrs:{span:"12",offset:"12"}},[t._v("span12|offset12")])],1)]},proxy:!0},{key:"description",fn:function(){return[l("p",[t._v("通过设置offset属性，将列进行右偏移，偏移栅格数为offset的值")])]},proxy:!0}])})],1)],1)],1),t._v(" "),l("h2",{attrs:{id:"api"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[t._v("#")]),t._v(" API")]),t._v(" "),l("h3",{attrs:{id:"cell-props"}},[l("a",{staticClass:"header-anchor",attrs:{href:"#cell-props"}},[t._v("#")]),t._v(" Cell props")]),t._v(" "),l("table",[l("thead",[l("tr",[l("th",{staticStyle:{"text-align":"left"}},[t._v("属性")]),t._v(" "),l("th",{staticStyle:{"text-align":"left"}},[t._v("说明")]),t._v(" "),l("th",{staticStyle:{"text-align":"left"}},[t._v("类型")]),t._v(" "),l("th",{staticStyle:{"text-align":"left"}},[t._v("默认值")])])]),t._v(" "),l("tbody",[l("tr",[l("td",{staticStyle:{"text-align":"left"}},[t._v("span")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("栅格的占位格数，可选值为0~24的整数")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("String|Number")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("null")])]),t._v(" "),l("tr",[l("td",{staticStyle:{"text-align":"left"}},[t._v("offset")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("栅格的向右偏移数，可选值为0~24的整数")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("String|Number")]),t._v(" "),l("td",{staticStyle:{"text-align":"left"}},[t._v("null")])])])])],1)}),[],!1,null,null,null);a.default=e.exports}}]);