Skip to content

顶部导航

@astryxdesign/core v0.7.1 · TopNav

TopNav Props ​

名称类型默认值说明
labelstring当前语言的「顶部导航」导航地标的无障碍名称。
mobileQuerystring-命中这条媒体查询时,起始和中间内容收进移动导航。

TopNav Slots ​

名称说明
heading品牌标题,窄屏时仍留在顶栏。
start标题右侧的内容。
default和 start 排在一起的导航项、菜单。
center居中区域。存在时顶栏改成三列。
end右侧操作。窄屏时仍留在顶栏。

TopNavMenu Props ​

名称类型默认值说明
labelstring-触发按钮上的文字。
itemsTopNavMenuItem[]-数据项。也可以用默认插槽写 NavMenuItem。
showDelaynumber150悬停打开前的等待,毫秒。
hideDelaynumber200指针离开后的关闭等待,毫秒。

TopNavMegaMenu Props ​

名称类型默认值说明
labelstring-触发按钮上的文字,也是面板的无障碍名称。
showDelaynumber150悬停打开前的等待,毫秒。
hideDelaynumber250指针离开后的关闭等待,毫秒。

默认插槽放 TopNavMegaMenuItem。featured 插槽放 TopNavMegaMenuFeaturedCard。抽屉里同一组内容变成手风琴,不再使用菜单角色。

TopNavHeading Props ​

名称类型默认值说明
headingstring-产品或应用名称。只有标志、没有文字时可以不传。
hrefstring-主标题链接。和 headingHref 相同,后者优先。
headingHrefstring-主标题链接。
superheadingstring-主标题上方的小字。
superheadingHrefstring-上方小字的链接。
subheadingstring-主标题下方的小字。
subheadingHrefstring-下方小字的链接。
logoLabelstring-标志单独成链接、旁边没有可读文字时的无障碍名称。不传则用 heading。
asNavLinkComponent'a'有地址时使用的链接根组件,可同时接收 href 和 to。

只有主标题有链接、且没有菜单时,整段标题是一个链接。有菜单、没有任何链接时,整段标题打开菜单。菜单和链接同时存在时,各行自己跳转,只有箭头打开菜单。

TopNavHeading Slots ​

名称说明
logo标题前的标志。和 icon 是同一个位置,logo 优先。
icon标题前的图标。
end标题行末尾,例如徽章。
menu弹出菜单,通常放 NavHeadingMenu。作用域提供 close 和 focusRequest。

TopNavMegaMenuFeaturedCard Props ​

名称类型默认值说明
titlestring-卡片标题。
descriptionstring-标题下面的说明。
hrefstring-整张卡片的链接。同时写了 linkLabel 时,链接改到卡片底部。
imagestring-正文上方的图片地址。
imageAltstring-图片的替代文本。不传时图片是装饰,读屏会跳过。
linkLabelstring-卡片底部的行动文字。
linkHrefstring-行动文字的地址。不传则用 href。
asNavLinkComponent'a'链接根组件。