Page 页面结构Page · PageHeader · Section

搭一页内容的三件套。Page 是外框：限宽、左右留白、区块纵向排开；PageHeader 是页头：面包屑、标题、说明、操作；Section 是带标题的内容区。间距按规范取：区块间 32，区块内 16。

示例

把窗口拉窄：页头的操作区按实际宽度换行，不依赖断点。

概览

最近 7 天

浏览
1,284

评论
36

待审阅
3

章节

4

区块内容放这里。

API

Page 属性

属性	类型	默认值	说明
`as`	`ElementType`	`'div'`	渲染成哪个元素。
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'lg'`	内容最大宽度档位，同 Container。
`gap`	`Responsive<Space>`	`8`	各区块之间的间距。
`padded`	`boolean`	`true`	上下留白（底部会避开安全区）。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

PageHeader 属性

属性	类型	默认值	说明
`title`*	`ReactNode`	—	页面标题。
`description`	`ReactNode`	—	标题下面的说明。
`breadcrumb`	`ReactNode`	—	面包屑位：显示在标题上方。
`actions`	`ReactNode`	—	操作区：宽屏在标题右侧，放不下时换到标题下面。
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`1`	标题的级别。
`titleId`	`string`	—	标题节点的 id，给 aria-labelledby 用。
`children`	`ReactNode`	—	放在页头最下面：标签页、筛选条之类。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。

Section 属性

属性	类型	默认值	说明
`title`	`ReactNode`	—	区块标题。
`description`	`ReactNode`	—	标题下面的说明。
`actions`	`ReactNode`	—	标题右侧的操作。
`headingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	标题的级别。
`gap`	`Responsive<Space>`	`4`	标题与内容、内容与内容之间的间距。
`…rest`	`HTMLAttributes`	—	ref、className、style 和其余原生属性透传到根节点。