Box 盒子

box盒子一般为左边一个盒子，右侧两个等高的半盒组成，常用于App首页座位重点突出。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

• 通过bgColors(设置3个盒子的背景色)，height(盒子总高度)，gap(盒子间隔)
• 通过borderRadius设置盒子圆角大小

<template>
	<view class="p-4 bg-white">
        <up-box height="160px" gap="12px" :bgColors="['#EEFCFF', '#FCF8FF', '#FDF8F2']">
            <template #left>
                左
            </template>
            <template #rightTop>
                右上
            </template>
            <template #rightBottom>
                右下
            </template>
        </up-box>
    </view>
</template>

右侧演示页面源代码地址

点击以下链接以查看右侧演示页面的源码

 github  gitee

API

Props

参数	说明	类型	默认值	可选值
height	高度	String	160px
bgCorlors	盒子背景色	String	['#EEFCFF', '#FCF8FF', '#FDF8F2']
borderRadius	圆角	String	6px
gap	间隔	String	15px

Slot

名称	说明
left	左侧
rightTop	右上
rightBottom	右下