React 组件

Layout 布局

用于构建 24 栅格页面结构；UGRow 定义行、间距和对齐，UGCol 定义列宽、偏移与响应式规则。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx
import { UGRow, UGCol } from '@ug666/ui-react'

基础栅格

Layout 是 24 栅格能力；UGRow 建立一行，UGCol 使用 span 分配该行宽度。

24
12
12
8
8
8
6
6
6
6

混合布局

同一行可组合不同列宽；总和超过 24 时按 wrap 配置换行。

4
8
12

间距与偏移

gutter 支持水平/垂直双轴间距，offset 用于列前留白。

6
10 + offset 2

栅格排序

push 与 pull 只改变列的视觉位置，不改变文档顺序。

第一列 · push 16
第二列 · pull 8

对齐方式

justify 控制主轴分布，覆盖起点、居中、终点和三种等距排列。

A
start
C
A
center
C
A
end
C
A
between
C
A
around
C
A
evenly
C

交叉轴对齐

align 控制不同高度列在交叉轴上的起点、居中、终点或拉伸表现。

start
A
B
C
center
A
B
C
end
A
B
C
stretch
A
B
C

换行控制

默认允许超过 24 栅格的列换行；关闭 wrap 后列保持在同一行，由外层决定是否滚动或裁切。

wrap=true
10
10
10
wrap=false
10
10
10

响应式列宽

xs（<640px）、sm（≥640px）、md（≥768px）、lg（≥1024px）、xl（≥1280px）接受列宽数字或完整列配置；未声明的断点继承最近配置。

24 / 12 / 8 + offset 2
24 / 12 / 14

响应式显隐

span=0 可在指定断点隐藏列；Web 样式同时提供 ug-hidden-* 工具类处理任意元素的断点显隐。

始终显示
md 及以上显示

语义元素

Row 与 Col 默认渲染 div，也可替换为 section、article 等原生元素或框架组件。

article

属性

UGRow 属性

负责行级间距、排列、对齐和换行。

属性类型默认值说明
gutternumber | [number, number]0数字设置水平间距；元组设置 [水平, 垂直] 双轴间距。
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly''start'主轴排列方式。
align'start' | 'center' | 'end' | 'stretch''stretch'交叉轴对齐方式。
wrapbooleantrue是否允许列换行。
asElementType'div'替换行容器的语义元素或自定义组件。
原生属性 / refHTMLAttributes<HTMLElement>—透传原生属性并暴露实际行元素。

UGCol 属性

负责列宽、偏移、视觉排序和各断点配置。

属性类型默认值说明
spannumber24列占用的栅格数，限制在 0 至 24；0 会隐藏该断点下的列。
offsetnumber0列左侧空出的栅格数。
push / pullnumber0 / 0向后或向前移动指定栅格数，不改变文档顺序。
xs / sm / md / lg / xlnumber | ColSize—断点分别为 <640 / ≥640 / ≥768 / ≥1024 / ≥1280px；可设置 span、offset、push、pull，未设置时继承最近配置。
asElementType'div'替换列容器的语义元素或自定义组件。
原生属性 / refHTMLAttributes<HTMLElement>—透传原生属性并暴露实际列元素。