Layout 布局 | uView Next - 企业级、高质量、更贴近业务场景的 uniapp ui框架

# Layout 布局

通过基础的 12 分栏，迅速简便地创建布局

注意

如需实现类似宫格的布局，请使用uView的Grid宫格组件，可以设置角标，功能更完善和灵活

# 基本使用

通过col组件的span设置需要分栏的比例

<template>
    <view class="u-page">
        <view class="u-demo-block">
            <text class="u-demo-block__title">基础使用</text>
            <view class="u-demo-block__content">
                <un-row customStyle="margin-bottom: 10px">
                    <u-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                </un-row>
                <un-row customStyle="margin-bottom: 10px">
                    <u-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </u-col>
                </un-row>
                <un-row justify="space-between">
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </u-col>
                    <u-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </u-col>
                </un-row>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
✅ Copy success!

# 分栏间隔

通过设置row组件的gutter参数，来指定每一栏之间的间隔(最终表现为左边内边距各为gutter/2)，默认间隔为0

<view class="u-demo-block__content">
    <un-row
            justify="space-between"
            gutter="10"
    >
        <u-col span="3">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
    </un-row>
</view>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
✅ Copy success!

# 混合布局

通过指定col组件的span属性，指定不同的值，达到不同的比例

<view class="u-demo-block__content">
    <un-row
        justify="space-between"
        gutter="10"
    >
        <u-col span="2">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col span="4">
            <view class="demo-layout bg-purple"></view>
        </u-col>
        <u-col span="6">
            <view class="demo-layout bg-purple-dark"></view>
        </u-col>
    </un-row>
</view>

<style lang="scss">
    .wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
</style>
✅ Copy success!

# 分栏偏移

通过指定col组件的offset属性可以指定分栏偏移的栏数。

<view class="u-demo-block__content">
    <un-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </un-row>
    <un-row>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
                offset="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </un-row>
</view>
✅ Copy success!

# 对齐方式

通过row组件的justify来对分栏进行灵活的对齐，可选值为start(或flex-start)、end(或flex-end)、center、around(或space-around)、between(或space-between)，其最终的表现类似于css的justify-content属性。

注意：由于持微信小程序编译后的特殊结构，此方式不支持微信小程序。

<view class="u-demo-block__content">
    <un-row
            justify="space-between"
            customStyle="margin-bottom: 10px"
    >
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </un-row>
    <un-row>
        <u-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </u-col>
        <u-col
                span="3"
        >
            <view class="demo-layout bg-purple"></view>
        </u-col>
    </un-row>
</view>
✅ Copy success!

# API

# Row Props

参数	说明	类型	默认值	可选值
gutter	栅格间隔，左右各为此值的一半，单位任意	String \| Number	0	-
justify	水平排列方式(微信小程序暂不支持)	String	`start`(或`flex-start`)	`end`(或`flex-end`) / `center` / `around`(或`space-around`) / `between`(或`space-between`)
align	垂直排列方式	String	center	top / bottom
align	垂直排列方式	String	center	top / bottom
wrap	排列时是否换行	Boolean	false	true

# Col Props

参数	说明	类型	默认值	可选值
span	栅格占据的列数，总12等分	String \| Number	0	1-12
offset	分栏左边偏移，计算方式与`span`相同	String \| Number	0	-
justify	水平排列方式	String	start	`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
align	垂直对齐方式	String	stretch	`top`、`center`、`bottom`、`stretch`
textAlign	文字水平对齐方式	String	left	center / right

# Row Events

事件名	说明	回调参数
click	`row`被点击	-

# Col Events

事件名	说明	回调参数
click	`col`被点击，会阻止事件冒泡到`row`	-

← Text 文本 Cell 单元格 →