仅桌面端保证样式
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 生成左右内边距,自身以负外边距补偿 | number | 0 |
| justify | 水平排列方式 | start | end | center | space-around | space-between | space-evenly | start |
| align | 垂直对齐方式 | top | middle | bottom | top |
| tag | 自定义元素标签 | string | div |
Row Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 行内容,一般为 EbCol 列表 | — | — |