GridLayout 栅格布局
布局组件
栅格布局 — Chaos UI 的布局组件,用于组织页面区域结构。
何时使用
需要栅格布局功能时使用本组件。
代码示例
基础用法
tsx
import { GridLayout, GridItem } from "@/components/ui/grid-layout"
export function Basic() {
return (
<GridLayout>
<GridItem>Content</GridItem>
</GridLayout>
)
}样式变体
columns
| columns | 说明 | 默认 |
|---|---|---|
1 | ✓ | |
2 | ||
3 | ||
4 | ||
5 | ||
6 | ||
12 | ||
auto |
gap
| gap | 说明 | 默认 |
|---|---|---|
none | ||
sm | ||
default | ✓ | |
lg | ||
xl |
对齐
| align | 说明 | 默认 |
|---|---|---|
start | ||
center | ||
end | ||
stretch | ✓ |
主轴对齐
| justify | 说明 | 默认 |
|---|---|---|
start | ✓ | |
center | ||
end | ||
between |
API / Props
GridLayout
| Prop | Type | Default | 说明 |
|---|---|---|---|
className | string | — | 自定义样式类名 |
responsive | { | — | |
sm | number | — | |
md | number | — | |
lg | number | — | |
xl | number | — | |
| ...rest | React.HTMLAttributes | — | 透传原生 DOM 属性 |
注意事项
- CVA 变体: 通过
class-variance-authority管理样式变体,类型安全。变体对象可导出复用。 - 复合组件: 包含 1 个子组件(GridItem),使用组合模式按需导入。
📘 完整交互式示例与控件属性请查看 Storybook 文档。