Maofeng
72 lines
2.4 KiB
Plaintext
72 lines
2.4 KiB
Plaintext
---
|
|
title: 商品页面示例
|
|
description: 使用路由链接组合响应式商品管理页面。
|
|
order: 30
|
|
toc:
|
|
- id: page-tabs
|
|
title: 页面 Tabs
|
|
- id: complete-example
|
|
title: 完整示例
|
|
---
|
|
|
|
## 页面 Tabs {#page-tabs}
|
|
|
|
`PageTabs` 采用标准的 Root、List、Trigger、Indicator 和 Content 组合：
|
|
|
|
```tsx
|
|
<PageTabs defaultValue="overview" placement="top-start" variant="default">
|
|
<PageTabsList aria-label="商品页面">
|
|
<PageTabsExtra>
|
|
<Button variant="ghost">返回</Button>
|
|
</PageTabsExtra>
|
|
<PageTabsTrigger value="overview">概览</PageTabsTrigger>
|
|
<PageTabsTrigger value="inventory">库存</PageTabsTrigger>
|
|
<PageTabsTrigger value="settings">设置</PageTabsTrigger>
|
|
<PageTabsIndicator />
|
|
<PageTabsExtra align="end">
|
|
<Button variant="ghost">帮助</Button>
|
|
</PageTabsExtra>
|
|
</PageTabsList>
|
|
<PageTabsContent value="overview">商品概览</PageTabsContent>
|
|
<PageTabsContent value="inventory">库存管理</PageTabsContent>
|
|
<PageTabsContent value="settings">商品设置</PageTabsContent>
|
|
</PageTabs>
|
|
```
|
|
|
|
`placement` 由 `top | right | bottom | left` 和 `start | center | end` 组合，例如 `top-start`、`top-center`、`left-end`。顶部和底部横向排列，左侧和右侧纵向排列；后缀控制 Tabs 组在主轴上的对齐。
|
|
|
|
`variant` 接受 `line`、`card` 或 `default`。`line` 在当前 Trigger 的内容侧绘制前景色线条，`card` 将带边框的标签与内容边界衔接，`default` 则渲染带凸起选中面的圆角浅色轨道。`PageTabsIndicator` 会自动跟随当前 Trigger。
|
|
|
|
`PageTabsExtra` 通过 `align="start | end"` 放到 List 两端，默认是 `start`。同一端可以声明多个 Extra，它们会保持原始顺序。
|
|
|
|
## 完整示例 {#complete-example}
|
|
|
|
```tsx
|
|
<PageContainer
|
|
info={{
|
|
breadcrumb: [{ label: "商品", href: "/products" }, { label: "蓝牙耳机" }],
|
|
description: "更新详情、库存和销售渠道。",
|
|
title: "蓝牙耳机",
|
|
}}
|
|
>
|
|
<PageHeader>
|
|
<PageBreadcrumb aria-label="当前位置" />
|
|
<PageHeading>
|
|
<PageTitle />
|
|
<PageDescription />
|
|
<PageHeadingExtra align="end">
|
|
<Button variant="outline">预览</Button>
|
|
<Button>保存</Button>
|
|
</PageHeadingExtra>
|
|
</PageHeading>
|
|
<PageHeaderExtra>
|
|
<ProductMetadata />
|
|
</PageHeaderExtra>
|
|
</PageHeader>
|
|
<ProductRouteTabs />
|
|
<PageSection aria-label="商品详情">
|
|
<ProductForm />
|
|
</PageSection>
|
|
</PageContainer>
|
|
```
|