顶部导航项
@astryxdesign/core v0.7.1 · TopNavItem
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | — | 这条导航的名字,默认显示成可见文字。打开 isIconOnly 后改成读屏用的 aria-label。必填。 |
href | string | — | 要跳去的地址。 |
as | NavLinkComponent | 'a' | 链接换成别的根组件时用,例如 RouterLink,它还会一并收到 to。只有写了地址才会用到。 |
target | string | — | 链接的 target。指明在新窗口打开时,会自己补上 noopener noreferrer。 |
rel | string | — | 链接的 rel。和上面自动补的 noopener noreferrer 合并,不会互相顶掉。 |
iconClass | string | — | 文字前面那个图标,传 CSS icon 的类名,例如 i-carbon-home。 |
isSelected | boolean | false | 是不是当前这一页。会写上 aria-current="page",并套上选中样式。 |
isDisabled | boolean | false | 禁用这一项。会写上 aria-disabled,去掉 href 和 target,让它既跳不走也点不动。 |
isIconOnly | boolean | false | 只显示图标,做成一个方形的按钮,文字收进 aria-label。收进移动端抽屉时文字会重新显示出来。 |
size | NavItemSize | 'md' | 这一项的高和左右内边距:'sm' 是 28px,'md' 是 32px,'lg' 是 36px。 |
事件
click(event: MouseEvent):点击时触发。禁用的项会先挡掉默认行为,也不会触发事件。