74 lines
1.7 KiB
Plaintext
74 lines
1.7 KiB
Plaintext
|
---
|
||
|
|
title: Custom overlay examples
|
||
|
|
description: Build result-producing modals, sheets, and drawers with UI components.
|
||
|
|
order: 30
|
||
|
|
toc:
|
||
|
|
- id: typed-modal
|
||
|
|
title: Typed modal
|
||
|
|
- id: sheet
|
||
|
|
title: Sheet
|
||
|
|
- id: drawer
|
||
|
|
title: Drawer
|
||
|
|
---
|
||
|
|
|
||
|
|
## Typed modal {#typed-modal}
|
||
|
|
|
||
|
|
The render callback receives `close` and `dismiss`. `close` returns an application result while `dismiss` follows the cancellation path.
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { openModal } from "@workspace/overlays/modal"
|
||
|
|
import { Button } from "@workspace/ui/components/button"
|
||
|
|
|
||
|
|
function PlanButton() {
|
||
|
|
async function choosePlan() {
|
||
|
|
const plan = await openModal<"free" | "pro">({
|
||
|
|
title: "Choose a plan",
|
||
|
|
description: "You can change this later.",
|
||
|
|
content: ({ close, dismiss }) => (
|
||
|
|
<div className="flex justify-end gap-2">
|
||
|
|
<Button variant="outline" onClick={dismiss}>
|
||
|
|
Cancel
|
||
|
|
</Button>
|
||
|
|
<Button onClick={() => close("free")}>Free</Button>
|
||
|
|
<Button onClick={() => close("pro")}>Pro</Button>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
})
|
||
|
|
|
||
|
|
if (plan) updatePlan(plan)
|
||
|
|
}
|
||
|
|
|
||
|
|
return <Button onClick={choosePlan}>Change plan</Button>
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## Sheet {#sheet}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { openSheet } from "@workspace/overlays/sheet"
|
||
|
|
|
||
|
|
await openSheet({
|
||
|
|
title: "Filters",
|
||
|
|
side: "right",
|
||
|
|
content: <ProductFilters />,
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
Use a sheet for a fixed edge panel. `side` accepts `top`, `right`, `bottom`, or `left`.
|
||
|
|
|
||
|
|
## Drawer {#drawer}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { openDrawer } from "@workspace/overlays/drawer"
|
||
|
|
|
||
|
|
await openDrawer({
|
||
|
|
title: "Choose a delivery time",
|
||
|
|
content: <DeliverySlots />,
|
||
|
|
showSwipeHandle: true,
|
||
|
|
snapPoints: [0.5, 1],
|
||
|
|
swipeDirection: "down",
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
Use a drawer for touch-oriented interaction with configurable swipe direction and Base UI snap points.
|