Grid 栅格
基本用法
<template>
<tu-space :item-style="{ width: '100%' }">
<tu-row>
<tu-col span="24"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row>
<tu-col span="12"><div class="col-block"></div></tu-col>
<tu-col span="12"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
</tu-space>
</template>
<style scoped>
.col-block {
height: 48px;
background-color: #e5e9f2;
}
:deep(.tu-col:nth-child(2n)) .col-block {
background-color: #d3dce6;
}
</style>
展开源码
区块间隔
<template>
<tu-row :gutter="[8, 16]">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
</template>
<style scoped>
.col-block {
height: 48px;
background-color: #e5e9f2;
}
:deep(.tu-col:nth-child(2n)) .col-block {
background-color: #d3dce6;
}
</style>
展开源码
偏移
offset
<template>
<tu-row>
<tu-col span="8" offset="8"><div class="block bg-blue">offset</div></tu-col>
<tu-col span="8"><div class="block"></div></tu-col>
</tu-row>
</template>
<style scoped>
.block {
height: 48px;
line-height: 48px;
text-align: center;
color: #fff;
background-color: #e5e9f2;
}
.bg-blue {
background-color: #3b82f6;
}
</style>
展开源码
相对移动
push
pull
<template>
<tu-row>
<tu-col span="18" push="6"><div class="block bg-blue">push</div></tu-col>
<tu-col span="6" pull="18"><div class="block bg-red">pull</div></tu-col>
</tu-row>
</template>
<style scoped>
.block {
height: 48px;
line-height: 48px;
text-align: center;
color: #fff;
background-color: #e5e9f2;
}
.bg-blue {
background-color: #3b82f6;
}
.bg-red {
background-color: #ef4444;
}
</style>
展开源码
对齐方式
使用 justify
可以自定义 flex 对齐方式
<template>
<tu-space :item-style="{ width: '100%' }">
<tu-row>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row justify="center">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row justify="end">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row justify="space-between">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row justify="space-around">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row justify="space-evenly">
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
<tu-col span="6"><div class="col-block"></div></tu-col>
</tu-row>
</tu-space>
</template>
<style scoped>
.col-block {
height: 48px;
background-color: #e5e9f2;
}
:deep(.tu-col:nth-child(2n)) .col-block {
background-color: #d3dce6;
}
</style>
展开源码
垂直对齐
用 align
定义垂直对齐方式
<template>
<tu-space>
<tu-row class="row-align-item" align="start">
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row class="row-align-item" align="end">
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row class="row-align-item" align="center">
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
</tu-row>
<tu-row class="row-align-item" align="stretch">
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
<tu-col span="8"><div class="col-block"></div></tu-col>
</tu-row>
<div style="position: relative; overflow: hidden;">
<tu-row class="row-align-item" align="baseline">
<tu-col span="8"><div class="col-block large">Rise</div></tu-col>
<tu-col span="8"><div class="col-block small">Rise</div></tu-col>
<tu-col span="8"><div class="col-block">Rise</div></tu-col>
</tu-row>
<div class="horizontal-line"></div>
</div>
</tu-space>
</template>
<style scoped>
.col-block {
height: 48px;
min-height: 100%;
background-color: #e5e9f2;
}
.col-block.large {
font-size: 32px;
}
.col-block.small {
font-size: 12px;
}
:deep(.tu-col:nth-child(2n)) .col-block {
background-color: #d3dce6;
}
.row-align-item {
width: 200px;
height: 175px;
background-color: #f9f9f9;
}
.horizontal-line {
width: 100%;
height: 0;
border-bottom: 1px solid #558abb;
position: absolute;
top: 24px;
}
</style>
展开源码
Col 属性
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | 栅格占位格数 | number | string | undefined |
offset | 栅格左侧的间隔格数 | number | string | undefined |
push | 栅格向右移动格数 | number | string | undefined |
pull | 栅格向左移动格数 | number | string | undefined |
Row 属性
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
gutter | 栅格间隙 | number |[number, number] | undefined |
justify | 水平排列方式 | 'start' |'end' |'center' |'space-around' |'space-between' |'space-evenly' |'start' | 'start' |
align | 垂直排列方式 | 'start' |'end' |'center' |'baseline' |'stretch' | 'start' |
wrap | 是否自动换行 | boolean | true |