Expand description
顶部导航栏组件。 顶部导航栏组件
文字标、栏目导航(当前项为浮起的胶囊)与右侧操作区;767px 以下只留文字标、 搜索与菜单按钮,菜单为底部抽屉(栏目、外观与次要链接)。样式见 styles/components/shell.css。
链接一律用普通 <a href>:JS 视图过渡协调器接管站内点击;不用
leptos_router::components::A,因为它会按前缀自动写 aria-current,
与这里按栏目家族计算的激活态冲突(/ 会对所有页面高亮)。
Structs§
- Header
Props - Props for the
Headercomponent. - NavItem
Config - 导航项配置,用于描述 Header 中的一个链接。
- NavItem
Props 🔒 - Props for the
NavItemcomponent. - NavSheet
Body 🔒Props - Props for the
NavSheetBodycomponent. - NavSheet
Props 🔒 - Props for the
NavSheetcomponent. - Search
Icon Link Props - Props for the
SearchIconLinkcomponent. - Sheet
NavItem 🔒Props - Props for the
SheetNavItemcomponent.
Constants§
- MENU_ID 🔒
- 手机导航抽屉的 DOM ID;预载回归脚本按
aria-controls定位菜单按钮。
Functions§
- Header
- 顶部导航栏组件。
- NavItem 🔒
- 单个桌面导航项:当前项内含
.nav-indicator胶囊(转场时只有胶囊在栏目间滑动,文字留在原位)。 - NavSheet 🔒
- 手机导航抽屉:底部面板,含栏目、外观分段控件与次要链接。选中栏目或链接后关闭。
- NavSheet
Body 🔒 - Required Props
- Search
Icon Link - 顶部导航栏右侧的搜索入口:「搜索 ⌘K」小胶囊。
- Sheet
NavItem 🔒 - 抽屉中的栏目链接(48px 触控目标),点击后关闭抽屉。
- item_
active 🔒 - 某个栏目(按
label区分)当前是否处于激活状态。