75 lines
2.6 KiB
Plaintext
75 lines
2.6 KiB
Plaintext
|
---
|
||
|
|
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>
|
||
|
|
```
|