React 组件

UGContainer 布局容器

用语义化区域构建应用壳层，并通过方向和区域尺寸组合常见页面骨架。

导入方式

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

tsx

import { UGContainer, UGHeader, UGAside, UGMain, UGFooter } from '@ug666/ui-react'

默认自动判断直接子区域：包含 Header 或 Footer 时纵向排列，否则横向排列。

Main

Container 组合语义化 Header、Aside、Main 与 Footer 区域。

Header

Main

通过嵌套 Container 覆盖页头、侧栏、主内容和页脚的常见组合，不需要额外布局组件。

Header

Main

Header

Main

Header

Main

Header/Footer 使用 height，Aside 使用 width；数字值按 px 处理。

剩余空间由 Main 填充

Header 与 Footer 默认 60px，Aside 默认 300px；显式尺寸始终优先。

Header · 60px

Main

所有区域都有合理的默认标签，也可通过 as 替换为业务需要的原生元素或框架组件。

div header

article main

div footer

建立 flex 布局上下文，并自动或显式决定主轴方向。

属性	类型	默认值	说明
as	ElementType	'div'	替换根容器的语义元素或自定义组件。
direction	'auto' \| 'horizontal' \| 'vertical'	'auto'	自动根据直接子级 Header/Footer 判断方向，或显式指定排列方向。
children	ReactNode	—	接收 Header、Aside、Main、Footer 或嵌套 Container。
原生属性 / ref	HTMLAttributes<HTMLElement>	—	透传原生属性并暴露实际根元素。

语义化页头与页脚区域，两者使用同一高度合同。

属性	类型	默认值	说明
as	ElementType	'header' / 'footer'	替换区域的语义元素或自定义组件。
height	number \| string	60	设置区域高度；有限数字按 px 处理，CSS 字符串原样使用。
children	ReactNode	—	区域内容。
原生属性 / ref	HTMLAttributes<HTMLElement>	—	透传原生属性并暴露 header 或 footer 元素。

语义化侧栏区域，默认固定宽度且不参与收缩。

属性	类型	默认值	说明
as	ElementType	'aside'	替换侧栏的语义元素或自定义组件。
width	number \| string	300	设置区域宽度；有限数字按 px 处理，CSS 字符串原样使用。
children	ReactNode	—	侧栏内容。
原生属性 / ref	HTMLAttributes<HTMLElement>	—	透传原生属性并暴露 aside 元素。

语义化主内容区域，默认填充剩余空间并允许内容正确收缩。

属性	类型	默认值	说明
as	ElementType	'main'	替换主内容的语义元素或自定义组件。
children	ReactNode	—	主内容。
原生属性 / ref	HTMLAttributes<HTMLElement>	—	透传原生属性并暴露 main 元素。