ActionSheet
action-sheet动作面板 · 建在 Base UI Dialog 底滑(同 Drawer 范式·motion token CSS 镜像) + 动作即 Close + 危险态 + 独立取消块 + 安全区
用法
基础用法
Trigger 触发，actions 数组驱动每个动作；每项点击后自动关闭。
tsx
<ActionSheet>
<ActionSheetTrigger>打开动作面板</ActionSheetTrigger>
<ActionSheetContent
actions={[
{ key: "save", label: "保存到相册" },
{ key: "share", label: "分享" },
]}
/>
</ActionSheet>标题与说明
title / description 顶部展示；动作项可带 description 小字。
tsx
<ActionSheetContent
title="图片操作"
description="选择对这张图片的操作"
actions={[
{ key: "save", label: "保存到相册" },
{ key: "share", label: "分享", description: "发送给好友或朋友圈" },
]}
/>危险动作
action.danger 红色高亮；cancelText 自定义或传 null 隐藏取消块。
tsx
<ActionSheetContent
title="删除确认"
cancelText="再想想"
actions={[
{ key: "delete", label: "删除", danger: true },
]}
/>何时用
移动端从底部弹出一组列表式动作（保存/分享/删除等）并带独立「取消」块时用。常驻悬浮的单个主操作用 Fab；从底部选时间/地区等多列滚轮值用 Picker。
导入
ts
import { ActionSheet, ActionSheetTrigger, ActionSheetClose, ActionSheetContent } from "@hulianui/ui"Props
ActionSheet（= Base UI Dialog.Root props，受控/非受控 open、onOpenChange 等照常）；ActionSheetTrigger / ActionSheetClose 透传对应 Base UI Dialog 部件。
ActionSheetContent — Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
actions * | ActionSheetAction[] | — | 动作列表（见下）；点击任一动作即关闭面板 |
container | HTMLElement | null | document.body | portal 挂载容器；传某祖先（如手机框，且其 transform/overflow-hidden）可把遮罩+面板约束在容器内 |
className | string | — | — |
ActionSheetAction：key: string · label: ReactNode · description?: ReactNode（小字说明）· danger?: boolean（红色危险动作）· disabled?: boolean · onClick?: () => void。
Events
| 事件 | 类型 | 说明 |
|---|---|---|
onOpenChange | (open: boolean) => void | ActionSheet（Dialog.Root）开关状态变化时触发（透传 Base UI Dialog） |
Slots
ActionSheetContent 的内容注入槽：
| 插槽 | 类型 | 说明 |
|---|---|---|
title | ReactNode | 顶部标题 |
description | ReactNode | 标题下说明 |
cancelText | ReactNode | null | 取消按钮文案（默认「取消」），传 null 隐藏取消块 |
禁忌 / 坑
- 点击任一 action 会先触发其
onClick再自动关闭面板（动作即 Close），不需手动 close。 - 默认 portal 到
document.body；要「画框内弹层」必须给container指向那个有transform或overflow-hidden的祖先，否则遮罩会铺满整个视口。
相关
TabBar · Fab · Picker · SwipeAction · PullToRefresh · SafeArea