Box 盒子

Box

Box

Props

Prop NameTypeRequiredDefaultDescription
container
bool
是否为容器,为容器时容器属性才能生效,并且被包裹的子组件中的一些属性(如 flex,order 等才能生效)
spacing
union
子组件间的间距,预设 sm md lg 等内置尺寸,或自定义间距大小(传入 number,单位为 px),间距方向跟随布局方向 可传入数组同时定义横向和纵向间距 [横向间距, 纵向间距]
direction
enum
布局方向,默认为 row 横向布局,column 为纵向布局,加上 -reverse 为单行(单列)子元素顺序反转
wrap
enum
容器定义,默认为 nowrap,超出不会换行/列,使用 wrap 可让其超出换行/列,-reverse 为多行(多列)顺序反转
alignItems
enum
项目定位
alignContent
enum
内容整体定位,center 为居中(按照布局方向),start 和 end 为首尾对其(按照布局方向)
justifyContent
enum
内容定位
padding
union
间距,可以为 sm md lg 等内置尺寸,或者为自定义字符串,或传入数组 [横向 padding, 纵向 padding],或有效的 padding 字符串
width
string
宽度, 同 css 宽度
height
string
高度,同 css 高度
span
number
栅格宽度,12栅格,支持小数点,12栅格不够用的情况下可使用小数点
order
number
排序,同 css 的 order
flex
string
flex 属性,同 css 的 flex
cleanMargin
bool
是否创建外层容器来清除外间距,正常情况下不需要关注,但是如果有滚动需求,又使用了 spacing,外边距会对滚动容器造成影响,此时可以通过这个参数来自动创建一个清理容器来修复

说明

  • 这是 Box 组件,主要为了解决前端布局问题和样式问题
  • 封装了兼容性支持程度下的一些 flex 属性

演示

spacing - 子元素间距

VIEW CODE ( LIVE )

direction - 方向

VIEW CODE ( LIVE )

wrap - 容器定义

VIEW CODE ( LIVE )

alignItems

VIEW CODE ( LIVE )

alignContent

VIEW CODE ( LIVE )

justifyContent

VIEW CODE ( LIVE )

padding

VIEW CODE ( LIVE )

span - 栅格排版

VIEW CODE ( LIVE )

order - 排序

VIEW CODE ( LIVE )

flex

VIEW CODE ( LIVE )

案例 - 水平垂直居中

VIEW CODE ( LIVE )

案例 - 模拟浮动布局

VIEW CODE ( LIVE )

案例 - 卡片布局

VIEW CODE ( LIVE )

案例 - 滚动

VIEW CODE ( LIVE )

常见使用场景

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司