Skip to content

useAppShellMobile

@astryxdesign/core v0.7.1 · useAppShellMobile

返回值 ​

名称类型说明
isMobileboolean当前视口是否小于 AppShell 移动端导航的断点。用它让挨着 AppShell 的移动端界面跟移动端导航踩同一个断点。
isMobileNavOpenbooleanAppShell 管的那个移动端导航抽屉是否打开。
mobileNavIdstring | undefined移动端导航抽屉的 DOM id,由 AppShell 设置。自定义按钮把它填进 aria-controls,读屏用户就知道这个按钮展开的是哪一块。不在管理抽屉的 AppShell 里时是 undefined。
toggleMobileNav() => void切换 AppShell 管的移动端导航抽屉。移动端导航停用时不做任何事。
openMobileNav() => void打开 AppShell 管的移动端导航抽屉。移动端导航停用时不做任何事。
closeMobileNav() => void关闭 AppShell 管的移动端导航抽屉。
isMobileNavEnabledboolean移动端导航是否已启用、并由 AppShell 管理。以下情况为 false:mobileNav 传了 false、没有导航内容、或者整个抽屉由自定义的 mobileNav 插槽负责。
hasAutoTogglebooleanAppShell 的自动切换按钮是否启用。mobileNav.hasToggle 传 false 时为 false。自己画按钮之前,先和 isMobile、isMobileNavEnabled 一起判断。
hasSideNavbooleanAppShell 有没有 sideNav 插槽。只有存在导航内容时才会托管移动端导航。

返回的对象是稳定的、响应式的。在模板或计算属性里读这些字段,视口变化时它们会跟着更新。