Skip to main content

Module header

Module header 

Source
Expand description

顶部导航栏组件。 顶部导航栏组件

文字标、栏目导航(当前项为浮起的胶囊)与右侧操作区;767px 以下只留文字标、 搜索与菜单按钮,菜单为底部抽屉(栏目、外观与次要链接)。样式见 styles/components/shell.css。

链接一律用普通 <a href>:JS 视图过渡协调器接管站内点击;不用 leptos_router::components::A,因为它会按前缀自动写 aria-current, 与这里按栏目家族计算的激活态冲突(/ 会对所有页面高亮)。

Structs§

HeaderProps
Props for the Header component.
NavItemConfig
导航项配置,用于描述 Header 中的一个链接。
NavItemProps 🔒
Props for the NavItem component.
NavSheetBodyProps 🔒
Props for the NavSheetBody component.
NavSheetProps 🔒
Props for the NavSheet component.
SearchIconLinkProps
Props for the SearchIconLink component.
SheetNavItemProps 🔒
Props for the SheetNavItem component.

Constants§

MENU_ID 🔒
手机导航抽屉的 DOM ID;预载回归脚本按 aria-controls 定位菜单按钮。

Functions§

Header
顶部导航栏组件。
NavItem 🔒
单个桌面导航项:当前项内含 .nav-indicator 胶囊(转场时只有胶囊在栏目间滑动,文字留在原位)。
NavSheet 🔒
手机导航抽屉:底部面板,含栏目、外观分段控件与次要链接。选中栏目或链接后关闭。
NavSheetBody 🔒
Required Props
SearchIconLink
顶部导航栏右侧的搜索入口:「搜索 ⌘K」小胶囊。
SheetNavItem 🔒
抽屉中的栏目链接(48px 触控目标),点击后关闭抽屉。
item_active 🔒
某个栏目(按 label 区分)当前是否处于激活状态。