feat(page): add composable page primitives

2026-09-28 23:13:49 +08:00
parent 0ec968c344
commit d23deca0e7
18 changed files with 1979 additions and 0 deletions
@@ -0,0 +1,74 @@
+---
+title: Product page example
+description: Compose a responsive product management page with route links.
+order: 30
+toc:
+  - id: page-tabs
+    title: Page tabs
+  - id: complete-example
+    title: Complete example
+---
+
+## Page tabs {#page-tabs}
+
+`PageTabs` follows the standard Root, List, Trigger, Indicator, and Content composition:
+
+```tsx
+<PageTabs defaultValue="overview" placement="top-start" variant="default">
+  <PageTabsList aria-label="Product pages">
+    <PageTabsExtra>
+      <Button variant="ghost">Back</Button>
+    </PageTabsExtra>
+    <PageTabsTrigger value="overview">Overview</PageTabsTrigger>
+    <PageTabsTrigger value="inventory">Inventory</PageTabsTrigger>
+    <PageTabsTrigger value="settings">Settings</PageTabsTrigger>
+    <PageTabsIndicator />
+    <PageTabsExtra align="end">
+      <Button variant="ghost">Help</Button>
+    </PageTabsExtra>
+  </PageTabsList>
+  <PageTabsContent value="overview">Product overview</PageTabsContent>
+  <PageTabsContent value="inventory">Inventory management</PageTabsContent>
+  <PageTabsContent value="settings">Product settings</PageTabsContent>
+</PageTabs>
+```
+
+`placement` combines `top | right | bottom | left` with `start | center | end`, for example `top-start`, `top-center`, or `left-end`. Top and bottom are horizontal; left and right are vertical. The suffix aligns the tabs group on its main axis.
+
+`variant` accepts `line`, `card`, or `default`. `line` draws a foreground edge beneath the active Trigger, `card` joins bordered tabs to the content edge, and `default` renders a muted rounded track with a raised active surface. `PageTabsIndicator` follows the active Trigger automatically.
+
+`PageTabsExtra` uses `align="start | end"` to occupy either edge of the List and defaults to `start`. Multiple extras may share an edge while retaining source order.
+
+## Complete example {#complete-example}
+
+```tsx
+<PageContainer
+  info={{
+    breadcrumb: [
+      { label: "Products", href: "/products" },
+      { label: "Wireless headphones" },
+    ],
+    description: "Update details, inventory, and sales channels.",
+    title: "Wireless headphones",
+  }}
+>
+  <PageHeader>
+    <PageBreadcrumb aria-label="Current location" />
+    <PageHeading>
+      <PageTitle />
+      <PageDescription />
+      <PageHeadingExtra align="end">
+        <Button variant="outline">Preview</Button>
+        <Button>Save</Button>
+      </PageHeadingExtra>
+    </PageHeading>
+    <PageHeaderExtra>
+      <ProductMetadata />
+    </PageHeaderExtra>
+  </PageHeader>
+  <ProductRouteTabs />
+  <PageSection aria-label="Product details">
+    <ProductForm />
+  </PageSection>
+</PageContainer>
+```