ActionSheet
action-sheetPresents touch-friendly actions in a modal sheet from the bottom edge.
Usage
Basic usage
Trigger triggers, actions array drives each action; each item is automatically closed after being clicked.
<ActionSheet>
<ActionSheetTrigger>Open the action panel</ActionSheetTrigger>
<ActionSheetContent
actions={[
{ key: "save", label: "Save to album" },
{ key: "share", label: "Share" },
]}
/>
</ActionSheet>Title and Description
title / description is displayed at the top; action items can have description small characters.
<ActionSheetContent
title="Picture operation"
description="Select an action on this picture"
actions={[
{ key: "save", label: "Save to album" },
{ key: "share", label: "Share", description: "Send to friends or circle of friends" },
]}
/>Dangerous action
action.danger red highlight; cancelText customized or passed null hidden cancel block.
<ActionSheetContent
title="Delete Confirm"
cancelText="Think again"
actions={[
{ key: "delete", label: "Delete", danger: true },
]}
/>When to Use
Use it to present a bottom sheet of actions such as save, share, or delete on mobile, with a separate Cancel block. Use Fab for one persistent primary action. Use Picker for wheel-based selection of values such as a time or region.
Import
import { ActionSheet, ActionSheetTrigger, ActionSheetClose, ActionSheetContent } from "@hulianui/ui"Props
ActionSheet accepts the Base UI Dialog.Root props, including the usual controlled or uncontrolled open state and onOpenChange. ActionSheetTrigger and ActionSheetClose are direct Base UI Dialog counterparts.
ActionSheetContent — Props
| Name | Type | Default | Description |
|---|---|---|---|
actions * | ActionSheetAction[] | — | Actions listed below; selecting any action closes the sheet |
container | HTMLElement | null | document.body | Portal container; pass an ancestor such as a transformed, overflow-hidden device frame to contain both backdrop and sheet |
className | string | — | — |
ActionSheetAction: key: string · label: ReactNode · description?: ReactNode (supporting text) · danger?: boolean (destructive red treatment) · disabled?: boolean · onClick?: () => void.
Events
| Event | Type | Description |
|---|---|---|
onOpenChange | (open: boolean) => void | Called by ActionSheet (Dialog.Root) when its open state changes; forwarded from Base UI Dialog |
Slots
Content injection slot for ActionSheetContent:
| Slot | Type | Description |
|---|---|---|
title | ReactNode | Top title |
description | ReactNode | Supporting text below the title |
cancelText | ReactNode | null | Cancel-button content; defaults to "\u53d6\u6d88" (Cancel); pass null to hide the cancel block |
Usage Guidelines
- Selecting an action calls its
onClickbefore the enclosing Close dismisses the sheet. Do not close it manually. - The portal defaults to
document.body. To keep the sheet inside a device frame or demo container, pointcontainerat the transformed or overflow-hidden ancestor; otherwise the backdrop covers the viewport.
Related
TabBar · Fab · Picker · SwipeAction · PullToRefresh · SafeArea