SxGrid (网格系统)

  • Implemented

基于 12 列系统的响应式网格布局。对齐 Microsoft Fluent UI Blazor Grid (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 响应式页面布局
  • 表单分栏与卡片列表
  • 复杂栅格组合排版

约束说明

  • Spacing 使用步长转换为像素间距。
  • 断点样式通过 CSS 类实现，不依赖运行时计算。

行为说明

  • OnBreakpointEnter 会在断点变化时触发回调（需要 JS 监听）。

API

Parameters (SxGrid)

状态 参数名 类型 默认值 描述
Implemented Spacing int 2 单元格之间的间距（步长）。
Implemented Justify GridJustify Start 主轴对齐方式。
Implemented AlignItems GridAlignItems Stretch 交叉轴对齐方式。
Implemented OnBreakpointEnter EventCallback<Breakpoint> 断点切换回调。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented Title (继承) string? null HTML title 属性。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Parameters (SxGridItem)

状态 参数名 类型 默认值 描述
Implemented Xs int 12 极窄屏占位列数 (1-12)。
Implemented Sm int? null 窄屏占位列数 (1-12)。
Implemented Md int? null 普通屏占位列数 (1-12)。
Implemented Lg int? null 宽屏占位列数 (1-12)。
Implemented Xl int? null 极宽屏占位列数 (1-12)。
Implemented ChildContent RenderFragment? null 网格项内容。

Events

状态 事件名 类型 描述
Implemented OnBreakpointEnter EventCallback<Breakpoint> 当响应式断点发生切换时触发。

示例

<SxGrid Spacing="2">
    <SxGridItem Xs="12" Md="6">A</SxGridItem>
    <SxGridItem Xs="12" Md="6">B</SxGridItem>
</SxGrid>

参考设计 (References)

在 Playground 中打开 →