Ant Design Blazor
Grid栅格
24 栅格系统。
设计理念
在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
概述
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
- 通过 row 在水平方向建立一组 column（简写 col）
- 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素
- 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用
来创建 - 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列 我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。
Examples
从堆叠到水平排列。
使用单一的一组 GridRow 和 GridCol 栅格组件，就可以创建一个基本的栅格系统，所有列（GridCol）必须放在 GridRow 内。
栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔(n 是自然数)。
如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。
列偏移。
使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。
列排序。
通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。
布局基础。
子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。
子元素垂直对齐。
通过 order 来改变元素的排序。
GridCol 提供 flex 属性以支持填充。
span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。
其中 xs={6} 相当于 xs={{ span: 6 }}。
使用 OnBreakpoint 事件个性化布局。
可以简单配置几种等分栅格和间距。
Grid API#
Row API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性行的内容，一般包含Col元素。 |
RenderFragment | -- |
| Type | 属性Currently unused | String | -- |
| Align | 属性flex 布局的垂直对齐方式：'top' | '中间' | '底部' | String | -- |
| Justify | 属性flex 布局的水平对齐：'start' | '结束' | '中心' | '空间周围' | “间隔” | String | -- |
| Wrap | 属性是否允许行的内容换行 | Boolean | true |
| Gutter | 属性网格之间的间距，可以是数字或字典，如 { xs: 8, sm: 16, md: 24 }，一个数组，使水平和垂直间距同时起作用 [水平，垂直] |
OneOf<Int32, Dictionary<String, Int32>, ValueTuple<Int32, Int32>, ValueTuple<Dictionary<String, Int32>, Int32>, ValueTuple<Int32, Dictionary<String, Int32>>, ValueTuple<Dictionary<String, Int32>, Dictionary<String, Int32>>> | -- |
| OnBreakpoint | 属性触发屏幕尺寸断点时执行的回调 | EventCallback<BreakpointType> | -- |
| DefaultBreakpoint | 属性默认屏幕尺寸断点。用于在预渲染期间设置装订线 | BreakpointType? | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
Col API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ChildContent | 属性专栏内容 | RenderFragment | -- |
| Flex | 属性是否使用弹性模式。如果为 null，则不会使用 flex 模式。 | OneOf<String, Int32> | -- |
| Span | 属性柱宽 | OneOf<String, Int32> | -- |
| Order | 属性Col的顺序，用于flex模式 | OneOf<String, Int32> | -- |
| Offset | 属性从左侧偏移 Col 的 Cols 数 | OneOf<String, Int32> | -- |
| Push | 属性将 Col 向右推的 Cols 数量 | OneOf<String, Int32> | -- |
| Pull | 属性将 Col 向左拉的 Cols 数量 | OneOf<String, Int32> | -- |
| Xs | 属性<576px 网格列 | OneOf<Int32, EmbeddedProperty> | -- |
| Sm | 属性≥576px 网格列 | OneOf<Int32, EmbeddedProperty> | -- |
| Md | 属性≥768px 网格列 | OneOf<Int32, EmbeddedProperty> | -- |
| Lg | 属性≥992px 网格列 | OneOf<Int32, EmbeddedProperty> | -- |
| Xl | 属性≥1200px 列的网格 | OneOf<Int32, EmbeddedProperty> | -- |
| Xxl | 属性≥1600px 列的网格 | OneOf<Int32, EmbeddedProperty> | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
EmbeddedProperty API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Span | 柱宽 | OneOf<String, Int32> | -- |
| Pull | 将 Col 向左拉的 Cols 数量 | OneOf<String, Int32> | -- |
| Push | 将 Col 向右推的 Cols 数量 | OneOf<String, Int32> | -- |
| Offset | 从左侧偏移 Col 的 Cols 数 | OneOf<String, Int32> | -- |
| Order | Col的顺序，用于flex模式 | OneOf<String, Int32> | -- |