栅格布局 KLRow

基本形式

<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

<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

<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

<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>

响应式布局

<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

Param	Type	Default	Description
[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]	`number`	`40`	=> 栅格间隔, 单位为px

KLCol

Param	Type	Description
[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})