天猫精灵IoT开放平台
Row 行 Col 列 栅格
更新时间：2019/01/28
访问次数：2396
row 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| gutter | 栅格距离 | number | —— | —— |
| justify | 水平排列 | string | 同justify-content | flex-start |
| align | 垂直排列 | string | 同align-items | flex-start |
col 参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数，必须是24的公约数 | number | —— | 24 |
代码示例
<template>
<div class="layout">
<tn-row :gutter="10">
<tn-col :span="12"><div :style="styles"></div></tn-col>
<tn-col :span="6"><div :style="styles"></div></tn-col>
<tn-col :span="3"><div :style="styles"></div></tn-col>
</tn-row>
<tn-row :gutter="20" justify="space-between" align="end" style="margin-top:20px;height:100px;background:#008EE9;">
<tn-col :span="12"><div :style="styles"></div></tn-col>
<tn-col :span="6"><div :style="styles"></div></tn-col>
</tn-row>
</div>
</template>
<script>
import { Row, Col } from 'genie-ui'
export default {
components: {
tnRow: Row,
tnCol: Col
},
computed: {
styles () {
return {
marginTop: '10px',
borderRadius: '4px',
minHeight: '36px',
background: '#d3dce6'
}
}
}
}
</script>
<style>
.layout{
padding: 0 10px;
}
</style>
