左侧抽屉

SideSheet浮层与反馈

手机上的后台导航。以 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="menu-trigger" on:click=move |_| open.set(true)>"\u83DC\u5355"</button>
    <SideSheet open=open id="menu-sheet" trigger_id="menu-trigger" label="\u540E\u53F0\u5BFC\u822A">
        <AdminNav/>
    </SideSheet>
}

预览

属性

键盘

用法