侧边导航项
@astryxdesign/core v0.7.1 · SideNavItem
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | — | 这一项显示的名字。收起后只剩图标时,以及弹层标题,也用它当读屏名。必填。 |
href | string | — | 要跳去的地址。不写就渲染成按钮,只触发 click。 |
as | NavLinkComponent | 'a' | 链接换成别的根组件时用,例如 RouterLink,它还会一并收到 to。只有写了地址才会用到。 |
target | string | — | 链接的 target。指明在新窗口打开时,会自己补上 noopener noreferrer。 |
rel | string | — | 链接的 rel。和自动补的 noopener noreferrer 合并。 |
iconClass | string | — | 文字前面的图标,传 CSS icon 的类名,例如 i-carbon-home。侧栏收起后,没有图标的项会被省略。 |
selectedIconClass | string | — | 选中时换成这个图标,不写就用 iconClass。 |
isSelected | boolean | false | 是不是当前这一页。会写上 aria-current="page",并套上选中样式。 |
isDisabled | boolean | false | 禁用这一项。会挡掉默认行为,也不触发事件。 |
size | 'sm' | 'md' | 'lg' | 'md' | 这一项的高和左右内边距。 |
collapsible | boolean | { defaultIsCollapsed?: boolean, isCollapsed?: boolean } | — | 下级能不能折叠。不传时,有下级就能折;传 false 则一直展开。写成对象可以设初始状态或者受控状态。 |
事件
click(event: MouseEvent):点击这一行时触发。禁用的项会先挡掉默认行为,也不会触发事件。
插槽
default:下级导航项。有下级的行会把它收成一个分组。icon:文字前面的图标元素,和iconClass二选一。selectedIcon:选中时的图标元素,不写就用icon。end:这一行末尾的内容,例如徽标或计数。