Layout 布局
通过基础的 24 分栏，迅速简便地创建布局。
基础用法
分栏间隔
对齐方式
垂直间距
响应式布局
API
Row Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 列元素之间的间距（单位为 px） | enum | - |
| tag | 自定义元素标签 | string | div |
| justify | 主轴对齐方式，可选值为 end center space-around space-between | string | start |
| align | 交叉轴对齐方式，可选值为 center bottom | string | top |
| wrap | 是否自动换行 | boolean | true |
Col Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| span | 列元素宽度 | number | string | - |
| offset | 列元素偏移距离 | number | string | - |
| push | 栅格向右移动格数 | number | string | 0 |
| pull | 栅格向左移动格数 | number | string | 0 |
| xs | <768px 响应式栅格数或者栅格属性对象 | number / object | — |
| sm | ≥768px 响应式栅格数或者栅格属性对象 | number / object | — |
| md | ≥992px 响应式栅格数或者栅格属性对象 | number / object | — |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | number / object | — |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | number / object | — |
| tag | 自定义元素标签 | string | div |
Row Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
Col Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
类型定义
组件导出以下类型定义：
ts
import type { ColProps, RowProps, RowAlign, RowJustify } from 'ryxon'