区块 · Section
区块用于布局场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。
安装与前置条件
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。
示例与使用方式
- 区块 · 样式变化 / 样式 1：首先体验这个示例，再查看代码理解组件的组合方式。
- 区块 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
- 区块 · 交互示例 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
API 与上游详细参考
优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。
Section
Section is the correct way to create page regions and group related content on a page. Use it for settings groups, form sections, sidebar areas, or any time you need visual separation between parts of a page. If you are tempted to use a Card for a page section, use Section instead.
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | 'section' | 'transparent' | 'muted' | 'section' | 应用于区域容器的背景变体。 |
| width | SizeValue | 区域的宽度；数字类型会被解释为像素值，字符串类型按原样使用。 | |
| height | SizeValue | 区域的高度；数字类型会被解释为像素值，字符串类型按原样使用。 | |
| maxWidth | SizeValue | 区域的最大宽度。 | |
| minHeight | SizeValue | 区域的最小高度。 | |
| children | ReactNode | 在区域内部渲染的内容。 | |
| dividers | Array<'top' | 'bottom' | 'start' | 'end'> | 区域的哪些边具有分隔线边框。 | |
| padding | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 4 | 使用间距比例的内部内边距（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。使用 padding={0} 实现全宽内容。 |
| paddingInline | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 行内（水平）方向内边距覆盖。仅覆盖行内轴内边距，同时保留来自 padding 或容器主题默认值的块内边距。使用间距比例（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。 | |
| paddingInlineStart | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 行内起始内边距覆盖（LTR 中为左侧，RTL 中为右侧）。仅在该边上覆盖 paddingInline 和 padding。 | |
| paddingInlineEnd | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 行内结束内边距覆盖（LTR 中为右侧，RTL 中为左侧）。仅在该边上覆盖 paddingInline 和 padding。 | |
| paddingBlock | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 块（垂直）方向内边距覆盖。仅覆盖块轴内边距，同时保留来自 padding 或容器主题默认值的行内内边距。使用间距比例（0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10）。 | |
| paddingBlockStart | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 块起始（顶部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。 | |
| paddingBlockEnd | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 块结束（底部）内边距，使用间距刻度。仅在该边上覆盖 paddingBlock 和 padding。 | |
| xstyle | StyleXStyles | 用于布局自定义的 StyleX 样式（外边距、定位、尺寸）。必须是 stylex.create() 的值，不能是内联样式对象。 |
使用建议
- Use Section for page-level grouping: settings panels, form groups, sidebar regions. These are sections of a page, not discrete items.
- Start with the default variant. Use muted only to call attention to a specific region.
- Add dividers between same-background sections that need separation.
- Combine with a heading + Stack for a typical page section pattern.
- 避免：Use Card when you mean Section. Cards are for discrete items (one notification, one profile). Sections are for page regions.
主题 API
{
"container": true,
"targets": [
{
"className": "astryx-section",
"visualProps": [
"variant"
]
}
],
"derived": [
{
"property": "padding",
"expand": "container"
}
]
}
组件结构
- Section container: Painted container that groups a page region.
- Consumer content: Caller-provided content rendered inside the section container.
完整示例的额外依赖
部分示例使用独立图标包。示例清单中的每条安装命令包含该示例实际需要的依赖；若要运行本页全部示例，还需安装：
npm install @heroicons/react@2.2.0