项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

Row 栅格行 ​

24 栅格系统的行容器(flex + wrap 实现),与 Col 搭配使用。gutter 通过 provide 下发给 Col,由 Col 生成左右内边距,Row 自身以等值负外边距补偿,保证首尾列与页面边缘对齐;行默认渲染为 div(tag 可更换)。单一 Row 内所有列的 span 总和超过 24 时会自动换行。

基础用法 ​

span 相加等于 24 即占满一行;列数与 span 可自由组合(3 x 8、2 x 12 等)。

span 8
span 8
span 8
span 12
span 12

栅格间隔 ​

gutter 为列间距(px),Col 左右各取一半内边距,Row 用负外边距补偿;视觉上列内容之间的间隔即 gutter 值。

span 6
span 6
span 6
span 6

水平排列 justify ​

justify 控制主轴分布:start / end / center / space-around / space-between / space-evenly;列未占满 24 格时效果明显。

center
center
space-between
space-between
end
end

垂直对齐 align ​

align 控制交叉轴对齐:top / middle / bottom;同一行内列高度不一致时差异最明显。

middle
middle 较高
bottom
bottom 较高

组合场景:等距卡片列表 ​

gutter 提供列间距,Col 内放置任意内容(这里用 EbCard),是最常见的后台仪表盘排版方式。

待办事项
12 项待处理
项目进度
按期推进
成员动态
3 人在线

API ​

Row Props

参数说明类型默认值
gutter栅格间隔(px),通过 provide 下发 Col 生成左右内边距,自身以负外边距补偿number0
justify水平排列方式start | end | center | space-around | space-between | space-evenlystart
align垂直对齐方式top | middle | bottomtop
tag自定义元素标签stringdiv

Row Slots

参数说明类型默认值
default行内容,一般为 EbCol 列表——