---
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>
```