Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA record's detail view in a side sheet with a title and subtitle, an optional primary action and tabs whose panels scroll while the header and tabs stay put.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for the detail view of a table row: orders, tickets, customers.
Do not use it for a record people will work in for long (use a page) or with more than five tabs.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Opens the sheet. |
title, subtitle | string | - | Name and description. |
tabs | { value, label, content }[] | - | The tabs. |
action | { label, onClick } | - | Optional primary action. |
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight on the tabs | change tab |
| Tab | from the tabs into the panel |
| Escape | closes |
The pattern ships a Testing Library test (sheet-detail-tabs.test.tsx) that covers the named and described dialog, tabs with the arrow keys, the action and reopening on the first tab.