布局 layout 待优化 待新增功能

通过row grid col 组件快速进行flex布局或grid布局

WARNING

布局类组件目前处于开发状态，功能尚不完善，后续版本将持续更新

Row 组件

row组件为一个flex盒子、用于划分一行

布局

使用align属性定义align-items与align-content属性，justify属性定义justify-content属性

属性默认值分别为：center、space-between

展开代码

<vi-row>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-row>

<vi-row justify="flex-start">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-row>

<vi-row justify="flex-end" align="flex-start">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-row>

<vi-row justify="space-around" align="flex-end">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-row>

方向

dirction属性用于定义布局方向，属性值同flex-direction

展开代码

<vi-row direction="column">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-row>

间隙

你可以通过gap属性定义元素间隙

展开代码

<vi-row justify="flex-start" gap="16px">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-big"></div>
</vi-row>

Grid 组件

grid组件为一个grid盒子

布局

grid组件使用row与col属性定义盒子的行数与列数，默认行列数均为1

展开代码

<vi-grid>
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-grid>

行列控制

通过row与col属性定义盒子总体行列数

展开代码

<vi-grid :col="2">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-grid>

<vi-grid :col="3">
<div class="layout-row__box-big"></div>
<div class="layout-row__box-middle"></div>
<div class="layout-row__box-small"></div>
</vi-grid>

col 组件

通过col与grid组件的配合，可以定义盒子所占行列数

展开代码

<vi-grid class="layout-grid" :col="3" :row="2">
<vi-col class="layout-grid__box-big" :col="2" :row="2"></vi-col>
<vi-col class="layout-grid__box-middle"></vi-col>
<vi-col class="layout-grid__box-small"></vi-col>
</vi-grid>

<style>
.layout-grid {
    width: 100%;
    height: 80px;
}
</style>

Props

Row

属性名	描述	类型	默认值

Grid

属性名	描述	类型	默认值

Col

属性名	描述	类型	默认值

插槽

布局组件均只存在默认插槽

插槽名	描述	有无默认内容