Flex 栅格 Row
基于 CSS Flex 布局的栅格组件，提供响应式布局，让页面适配不同屏宽更轻松。
基础使用
Row 组件把内容区域等分为 24 份。
Span 24 | Width 100%
Span 12 | Width 50%
Span 12 | Width 50%
Span 8 | Width 33.3333%
Span 8 | Width 33.3333%
Span 8 | Width 33.3333%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
Span 4 | Width 16.6667%
隐藏源代码
栅格尺寸
Col 的 span 属性设置栅格宽度。'xs'、'sm'、'md'、'lg'、'xl'、'xxl' 分别对应 、、、、、 的窗口像素宽度。
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Span 6 | Width 25%
Responsive
Responsive
Responsive
Responsive
Responsive
Responsive
隐藏源代码
栅格偏移
Col 的 offset 属性设置栅格宽度。同样地，支持响应式。
Span 6 | Offset 6
Span 8 | Offset 4
Span 6 | Offset Responsive
隐藏源代码
栅格间隔
Row 的 gutter 属性设置栅格宽度。同样地，支持响应式。
x: 4px, y: 4px
Content
Content
Content
Content
x: 8px, y: 4px
Content
Content
Content
Content
Responsive
Content
Content
Content
Content
隐藏源代码
横向排列
Row 的 justify 属性设置横向排列方式。
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Space Between
Content
Content
Content
Content
Space Around
Content
Content
Content
Content
Space Evenly
Content
Content
Content
Content
隐藏源代码
纵向排列
Row 的 align 属性设置纵向排列方式。
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Stretch
Content
Content
Content
Content
隐藏源代码
API
RowProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| gutter | number | { x?: number; y?: number } | Value4DeviceWidth<number | { x?: number; y?: number }> | 是 | 0 | 子组件 Col 之间的间隔。 | 0.0.0-beta |
| justify | 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 是 | 'start' | Row 的横向排列方式，基于 CSS justify-content 属性。 | 0.0.0-beta |
| align | 'start' | 'center' | 'end' | 'stretch' | 是 | 'start' | Row 的纵向排列方式，基于 CSS align-items 属性。 | 0.0.0-beta |
| wrap | boolean | 是 | true | 子组件 Col 是否可以换行。 | 0.0.0-beta |
RowSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 子组件 Col。 | 0.0.0-beta |
ColProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| offset | number | ValueWithDeviceWidth<number> | 是 | 0 | Col 左侧偏移。 | 0.0.0-beta |
| span | number | ValueWithDeviceWidth<number> | 是 | 24 | Col 宽度。 | 0.0.0-beta |
ColSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | Col 内容。 | 0.0.0-beta |
ValueWithDeviceWidth
ts
enum SCREEN_SIZE_TYPE {
XS = 'xs',
SM = 'sm',
MD = 'md',
LG = 'lg',
XL = 'xl',
XXL = 'xxl'
}
type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>