栅格布局 KLRow

基本形式

栅格布局 KLRow - 图1

  1. <kl-row>
    <kl-col span=12>
    <div class="u-gridContent u-gridContent-1"></div>
    </kl-col>
    </kl-row>
    <kl-row>
    <kl-col span=6>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=6>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    </kl-row>
    <kl-row>
    <kl-col span=4>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=4>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    <kl-col span=4>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    </kl-row>
    <kl-row>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=2>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    </kl-row>

布局模式Flex

栅格布局 KLRow - 图2

  1. <kl-row type="flex">
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-3"></div>
    </kl-col>
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-3"></div>
    </kl-col>
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=6>
    <div class="f-mb10 u-gridContent u-gridContent-3"></div>
    </kl-col>
    </kl-row>

列间距Gutter

栅格布局 KLRow - 图3

  1. <kl-row gutter=10>
    <kl-col span=6>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=6>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    </kl-row>

列偏移Offset

栅格布局 KLRow - 图4

  1. <kl-row gutter=10>
    <kl-col span=6>
    <div class="u-gridContent u-gridContent-2"></div>
    </kl-col>
    <kl-col span=2 offset=3>
    <div class="u-gridContent u-gridContent-3"></div>
    </kl-col>
    </kl-row>

响应式布局

栅格布局 KLRow - 图5

  1. <kl-row>
    <kl-col xs="{{span:1,offset:0}}" sm="{{span:3,offset:0}}" md="{{span:4,offset:0}}" lg="{{span:5,offset:0}}"><div class="u-gridContent u-gridContent-3"></div></kl-col>
    <kl-col xs="1" sm="3" md="3" lg="2"><div class="u-gridContent u-gridContent-2"></div></kl-col>
    <kl-col xs="4" sm="3" md="3" lg="2"><div class="u-gridContent u-gridContent-3"></div></kl-col>
    <kl-col xs="6" sm="3" md="2" lg="3"><div class="u-gridContent u-gridContent-2"></div></kl-col>
    </kl-row>

API

KLRow

KLRow

ParamTypeDefaultDescription
[options.data]object=> 绑定数据
[options.data.class]string=> 补充class
[options.data.type]string=> 布局模式,可选 flex,现代浏览器下有效
[options.data.justify]string"start"=> flex 布局下的水平排列方式
[options.data.align]string"top"=> flex 布局下的垂直排列方式
[options.data.wrap]string"wrap"=> flex布局下的换行显示方式,wrap/nowrap/wrap-reverse
[options.data.gutter]number40=> 栅格间隔, 单位为px

KLCol

KLCol

ParamTypeDescription
[options.data]object=> 绑定数据
[options.data.class]string=> 补充class
[options.data.span]number=> 栅格占据的列数
[options.data.offset]number=> 栅格左侧的间隔格数
[options.data.xs]number/object=> <768px 响应式栅格数或者栅格属性对象, number/object (例如: {span: 4, offset: 4})
[options.data.sm]number/object=> ≥768px 响应式栅格数或者栅格属性对象, number/object (例如: {span: 4, offset: 4})
[options.data.md]number/object=> ≥992 响应式栅格数或者栅格属性对象, number/object (例如: {span: 4, offset: 4})
[options.data.lg]number/object=> ≥1200 响应式栅格数或者栅格属性对象, number/object (例如: {span: 4, offset: 4})