底部抽屉

BottomSheet浮层与反馈

手机上的导航与目录面板。以 heavy 弹簧从底部升起；点遮罩、按 Esc、点按或向下拖过 80px 把手关闭，拖拽有 4px 死区。打开时聚焦当前项，关闭后焦点回到触发按钮，期间锁住页面滚动。抽屉内的子组件用 use_sheet_close() 关闭它。

属性

名称	类型	默认值	说明
`open`	`RwSignal<bool>`	必填	是否打开；关闭动画结束后才置为 false。
`id`	`String`	必填	抽屉的 DOM id，供触发按钮的 aria-controls 引用。
`trigger_id`	`String`	必填	触发按钮的 id，关闭后焦点回到这里。
`label`	`String`	必填	对话框的无障碍名称。
`children`	`ChildrenFn`	必填	抽屉内容。

键盘

Esc: 关闭抽屉
Tab: 在抽屉内容间移动

用法

src/components/ui/sheet.rs

let open = RwSignal::new(false);

view! {
    <button id="toc-trigger" on:click=move |_| open.set(true)>"\u76EE\u5F55"</button>
    <BottomSheet open=open id="toc-sheet" trigger_id="toc-trigger" label="\u76EE\u5F55">
        <TocLinks/>
    </BottomSheet>
}

预览

属性

键盘

用法