Skip to content

侧边导航项

@astryxdesign/core v0.7.1 · SideNavItem

属性 ​

属性类型默认值说明
labelstring—这一项显示的名字。收起后只剩图标时,以及弹层标题,也用它当读屏名。必填。
hrefstring—要跳去的地址。不写就渲染成按钮,只触发 click。
asNavLinkComponent'a'链接换成别的根组件时用,例如 RouterLink,它还会一并收到 to。只有写了地址才会用到。
targetstring—链接的 target。指明在新窗口打开时,会自己补上 noopener noreferrer。
relstring—链接的 rel。和自动补的 noopener noreferrer 合并。
iconClassstring—文字前面的图标,传 CSS icon 的类名,例如 i-carbon-home。侧栏收起后,没有图标的项会被省略。
selectedIconClassstring—选中时换成这个图标,不写就用 iconClass。
isSelectedbooleanfalse是不是当前这一页。会写上 aria-current="page",并套上选中样式。
isDisabledbooleanfalse禁用这一项。会挡掉默认行为,也不触发事件。
size'sm' | 'md' | 'lg''md'这一项的高和左右内边距。
collapsibleboolean | { defaultIsCollapsed?: boolean, isCollapsed?: boolean }—下级能不能折叠。不传时,有下级就能折;传 false 则一直展开。写成对象可以设初始状态或者受控状态。

事件 ​

  • click(event: MouseEvent):点击这一行时触发。禁用的项会先挡掉默认行为,也不会触发事件。

插槽 ​

  • default:下级导航项。有下级的行会把它收成一个分组。
  • icon:文字前面的图标元素,和 iconClass 二选一。
  • selectedIcon:选中时的图标元素,不写就用 icon。
  • end:这一行末尾的内容,例如徽标或计数。