Layout 布局
通过基础的 24 分栏,迅速简便地创建布局。
基础布局
使用列创建基础网格布局。
通过 row
和 col
组件,并通过 col
组件的 span
属性我们就可以自由地组合布局
vue
<template>
<ImRow :gutter="8">
<ImCol span="8"><div class="demo" style="height: 200px"></div></ImCol>
<ImCol span="4"><div class="demo"></div></ImCol>
<ImCol span="4"><div class="demo"></div></ImCol>
<ImCol span="8"><div class="demo" style="height: 200px"></div></ImCol>
</ImRow>
<ImRow>
<ImCol span="24"><div class="demo" style="height: 200px"></div></ImCol>
</ImRow>
</template>
API
Row Props
ts
defineProps({
gutter: {
type: Number,
default: 0,
},
align: {
type: String,
default: 'flex-start',
},
});
Col Props
ts
defineProps({
span: {
type: [Number, String],
default: 4,
},
});