Maofeng
95 lines
3.2 KiB
Plaintext
95 lines
3.2 KiB
Plaintext
---
|
||
title: 页面组合
|
||
description: 组合标题、页面操作、面包屑和内容 Section。
|
||
order: 10
|
||
toc:
|
||
- id: stylesheet
|
||
title: 样式入口
|
||
- id: basic-page
|
||
title: 基础页面
|
||
- id: page-info
|
||
title: 页面信息
|
||
- id: breadcrumb
|
||
title: 面包屑
|
||
---
|
||
|
||
## 样式入口 {#stylesheet}
|
||
|
||
在应用 Tailwind 样式入口加入：
|
||
|
||
```css
|
||
@import "@workspace/page/globals.css";
|
||
```
|
||
|
||
## 基础页面 {#basic-page}
|
||
|
||
```tsx
|
||
import {
|
||
PageBackButton,
|
||
PageBreadcrumb,
|
||
PageContainer,
|
||
PageDescription,
|
||
PageHeader,
|
||
PageHeaderExtra,
|
||
PageHeading,
|
||
PageHeadingExtra,
|
||
PageSection,
|
||
PageSubtitle,
|
||
PageTitle,
|
||
} from "@workspace/page"
|
||
import { Button } from "@workspace/ui/components/button"
|
||
|
||
export function ProductsPage() {
|
||
return (
|
||
<PageContainer
|
||
info={{
|
||
breadcrumb: [
|
||
{ label: "首页", href: "/" },
|
||
{ label: "商品目录", href: "/products" },
|
||
{ label: "商品" },
|
||
],
|
||
description: "管理商品、价格和上架状态。",
|
||
subtitle: "商品目录",
|
||
title: "商品",
|
||
}}
|
||
>
|
||
<PageHeader>
|
||
<PageBreadcrumb />
|
||
<PageHeading>
|
||
<PageHeadingExtra align="start">
|
||
<PageBackButton href="/products">商品列表</PageBackButton>
|
||
</PageHeadingExtra>
|
||
<PageTitle />
|
||
<PageSubtitle />
|
||
<PageDescription />
|
||
<PageHeadingExtra align="end">
|
||
<Button>新建商品</Button>
|
||
</PageHeadingExtra>
|
||
</PageHeading>
|
||
<PageHeaderExtra>
|
||
<ProductStatus />
|
||
</PageHeaderExtra>
|
||
</PageHeader>
|
||
|
||
<PageSection aria-label="商品列表">
|
||
<ProductsTable />
|
||
</PageSection>
|
||
</PageContainer>
|
||
)
|
||
}
|
||
```
|
||
|
||
## 页面信息 {#page-info}
|
||
|
||
`PageContainer.info` 接受 `Partial<PageInfo>`，并通过 `usePageInfo()` 暴露解析后的值。外层 `PagesManager` 提供 `getPageInfo` 后，该函数会接收局部信息，并可使用路由或布局元数据将其补全。`PageTitle`、`PageSubtitle`、`PageDescription` 和 `PageBreadcrumb` 在自身未提供内容或 items 时读取对应的页面信息；组件显式提供的内容优先。两个来源都没有可渲染内容时，组件返回 `null`，不会在页面中留下空元素。
|
||
|
||
`PageHeadingExtra` 接受 `align="start | end"`。同一侧的多个 Extra 会保持声明顺序，`PageHeaderExtra` 则提供标题下方不限定内容类型的区域。所有容器都保留 `className` 和原生 HTML props。
|
||
|
||
`PageBackButton` 未指定目标地址时使用浏览器历史记录返回。传入 `href` 可渲染原生链接，传入 `render` 可接入特定路由库的 Link；自定义 `onClick` 调用 `preventDefault()` 后也会阻止默认的历史返回。
|
||
|
||
## 面包屑 {#breadcrumb}
|
||
|
||
按照从根节点到当前页面的顺序向 `PageBreadcrumb` 传入 `items`。最后一项会渲染为当前页面；带 `href` 的项目使用原生链接，`render` 则可以接入特定路由库的 Link。当路径超过 `maxItems`（默认 `4`）时，中间项目会收入支持键盘操作的溢出菜单。
|
||
|
||
省略 `items` 后仍可使用原有组合 API，Breadcrumb Item、Link 和 Separator 继续从 `@workspace/ui/components/breadcrumb` 导入。
|