移动导航 · MobileNav

移动导航用于导航场景。下面的官方示例展示原生用法与状态，属性名保持上游 API。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

移动导航 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
移动导航 · 综合展示 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
移动导航 · 基础用法 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
移动导航 · 交互示例 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
移动导航 · 基础用法 5：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
移动导航 · 交互示例 6：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Mobile Nav

A slide-out drawer for mobile navigation. MobileNav is the mobile counterpart to SideNav and accepts the same children. Use it on narrow viewports where a persistent sidebar is not practical.

使用建议

Share the same nav items between MobileNav and SideNav by extracting them into a variable.
Provide a header when the drawer's purpose is not obvious from its content.
Inside AppShell, use MobileNavToggle to open the drawer; it reads state from context. Do not pass isOpen/onOpenChange to the toggle.
避免：Use MobileNav on desktop: use a persistent SideNav instead.

主题 API

{
  "targets": [
    {
      "className": "astryx-mobile-nav",
      "visualProps": [
        "side"
      ]
    }
  ]
}

Mobile Nav

A slide-out drawer for mobile navigation. Accepts SideNav children.

属性	类型	默认值	说明
isOpen	boolean		Whether the drawer is open. Inside AppShell, this is managed automatically via context. Outside AppShell, provide this prop to control the drawer yourself.
onOpenChange	(isOpen: boolean) => void		Called when the drawer visibility changes (backdrop click, Escape key, or close button). Inside AppShell, this is managed automatically via context.
children *	ReactNode		Drawer content: typically SideNavSection/SideNavItem, or any ReactNode.
header	ReactNode		Header content for the drawer. Rendered next to the close button. Pass a string for a simple text heading, or a ReactNode for custom content (logo, search bar, etc.).
width	number	320	Drawer width in pixels. Capped at 85vw to prevent overflow on small screens.
side	'start' \| 'end' \| 'auto'	'auto'	Which side the drawer slides from. Start is left in LTR, right in RTL. Auto picks a side based on the trigger position.

Mobile Nav Toggle

Hamburger button that opens/closes the mobile nav drawer. Reads open state from AppShell context automatically: does NOT accept isOpen or onOpenChange props. Renders nothing above the mobile breakpoint.

属性	类型	默认值	说明
children	ReactNode		Custom content to render instead of the default hamburger icon.
label	string	'Open navigation'	Accessible label for the toggle button.

组件结构

Navigation overlay: Full-viewport dialog overlay that hosts the mobile navigation drawer.
Drawer: Painted panel that slides in from the resolved viewport edge.
Header: Fixed row containing optional header content and the close button.
Content: Scrollable region containing the navigation content.
Close button: Button that closes the navigation drawer.
Toggle button: AppShell-aware Button that opens or closes the drawer on mobile viewports.

完整示例的额外依赖

部分示例使用独立图标包。示例清单中的每条安装命令包含该示例实际需要的依赖；若要运行本页全部示例，还需安装：

npm install @heroicons/react@2.2.0