栅格布局 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
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
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}) |