@gridui /网站导航
着陆的家庭。公共API: SiteNavigation, SiteNavigationLink, SiteNavigationProps.
从 @gridui/site-navigation 和负载 @gridui/site-navigation/styles.css 后的主题。
此家族使用的任何组合依赖项的加载样式。应用程序拥有自己的路由、标签、状态持久化和品牌。
丰富的导航菜单
SiteNavigation结合 @gridui/responsive-navigation, @gridui/menu,
@gridui/drawer, @gridui/button. 应用程序提供链接、本地化标签、
首选项、桌面内容和可选的移动内容/页脚槽。
ResponsiveNavigation拥有桌面/移动切换功能。菜单拥有内容中立 导航部分。抽屉拥有模态焦点管理,滚动锁定,开始/结束 放置、解除及其页眉/正文/页脚部分。独立的Popover 家庭拥有桌面悬浮意图。SiteHeader提供了一个单独的框架外壳 来电者自有品牌。
集 columns={1} 在MenuGrid上传递移动内容;构图是这样的
不选择它的私人后代。加载之前呈现的依赖样式
SiteNavigation风格。
className 样式ResponsiveNavigation根。对于其链接和的标题
首选项在远端形成一个紧凑组,使用应用程序实用工具
类禁用根的默认伸缩增长:
<SiteHeader justify="between" gap={16} padding={{ base: 24, lg: 32 }}>
<BrandLink href="/">Product</BrandLink>
<SiteNavigation className="flex-none" {...localizedNavigation} />
</SiteHeader>
如果没有这个类,导航栏将保持其现有的灵活宽度 其首选项位于可用导航区域的相对边缘。
本地导航和抽屉解雇
links 之外,还接受本地锚属性和处理程序 href,
label, current. 调用者的 onClick 首先在桌面和
移动。调用 preventDefault() 保持移动抽屉打开。修改后点击,
非主要点击、下载和指向另一个浏览上下文的链接
保持他们原有的行为,同时把抽屉打开。
一个普通的同上下文移动链接关闭抽屉。如果它的目的地有
片段并匹配当前的原点、路径和查询、本地锚导航
保持目标焦点和滚动位置,而不是将焦点返回到
菜单触发器。关闭按钮和逃离解雇继续恢复触发器
的焦点。 onMobileCloseAutoFocus 将暴露底层的DrawerPanel事件
应用程序需要另一个焦点策略;调用 preventDefault() 抑制了
正常触发恢复。它不会取消导航或抽屉解雇。
<SiteNavigation
links={[
{ href: "#features", label: "Features" },
{ href: "/guide/", label: "Guide", target: "_blank", rel: "noreferrer" },
{ href: "/report.csv", label: "Download report", download: true },
]}
{...navigationLabelsAndPreferences}
/>
Caller-owned mobileContent, mobilePreferences, mobileFooter 槽保留
它们自己的激活策略。将它们的控件与公共Drawer部件组合在一起
他们什么时候应该解散专家组。