TopNav Props
| 名称 | 类型 | 默认值 | 说明 |
|---|
label | string | 当前语言的「顶部导航」 | 导航地标的无障碍名称。 |
mobileQuery | string | - | 命中这条媒体查询时,起始和中间内容收进移动导航。 |
TopNav Slots
| 名称 | 说明 |
|---|
heading | 品牌标题,窄屏时仍留在顶栏。 |
start | 标题右侧的内容。 |
default | 和 start 排在一起的导航项、菜单。 |
center | 居中区域。存在时顶栏改成三列。 |
end | 右侧操作。窄屏时仍留在顶栏。 |
| 名称 | 类型 | 默认值 | 说明 |
|---|
label | string | - | 触发按钮上的文字。 |
items | TopNavMenuItem[] | - | 数据项。也可以用默认插槽写 NavMenuItem。 |
showDelay | number | 150 | 悬停打开前的等待,毫秒。 |
hideDelay | number | 200 | 指针离开后的关闭等待,毫秒。 |
| 名称 | 类型 | 默认值 | 说明 |
|---|
label | string | - | 触发按钮上的文字,也是面板的无障碍名称。 |
showDelay | number | 150 | 悬停打开前的等待,毫秒。 |
hideDelay | number | 250 | 指针离开后的关闭等待,毫秒。 |
默认插槽放 TopNavMegaMenuItem。featured 插槽放 TopNavMegaMenuFeaturedCard。抽屉里同一组内容变成手风琴,不再使用菜单角色。
TopNavHeading Props
| 名称 | 类型 | 默认值 | 说明 |
|---|
heading | string | - | 产品或应用名称。只有标志、没有文字时可以不传。 |
href | string | - | 主标题链接。和 headingHref 相同,后者优先。 |
headingHref | string | - | 主标题链接。 |
superheading | string | - | 主标题上方的小字。 |
superheadingHref | string | - | 上方小字的链接。 |
subheading | string | - | 主标题下方的小字。 |
subheadingHref | string | - | 下方小字的链接。 |
logoLabel | string | - | 标志单独成链接、旁边没有可读文字时的无障碍名称。不传则用 heading。 |
as | NavLinkComponent | 'a' | 有地址时使用的链接根组件,可同时接收 href 和 to。 |
只有主标题有链接、且没有菜单时,整段标题是一个链接。有菜单、没有任何链接时,整段标题打开菜单。菜单和链接同时存在时,各行自己跳转,只有箭头打开菜单。
TopNavHeading Slots
| 名称 | 说明 |
|---|
logo | 标题前的标志。和 icon 是同一个位置,logo 优先。 |
icon | 标题前的图标。 |
end | 标题行末尾,例如徽章。 |
menu | 弹出菜单,通常放 NavHeadingMenu。作用域提供 close 和 focusRequest。 |
| 名称 | 类型 | 默认值 | 说明 |
|---|
title | string | - | 卡片标题。 |
description | string | - | 标题下面的说明。 |
href | string | - | 整张卡片的链接。同时写了 linkLabel 时,链接改到卡片底部。 |
image | string | - | 正文上方的图片地址。 |
imageAlt | string | - | 图片的替代文本。不传时图片是装饰,读屏会跳过。 |
linkLabel | string | - | 卡片底部的行动文字。 |
linkHref | string | - | 行动文字的地址。不传则用 href。 |
as | NavLinkComponent | 'a' | 链接根组件。 |