SuperAPI AI 工具集

sgds-components-sidenav

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:使用 SGDS Web Component 构建垂直侧边栏导航,组件包括 <sgds-sidenav>(外层侧边栏)、<sgds-sidenav-item>(可折叠菜单分区或直接链接项)和 <sgds-sidenav-link>(L2/L3 具体导航链接)。安装与框架集成参见 sgds-components-setup(含 React 19+、React ≤18、Vue、Angular)。

主要能力与用法: 菜单类型(可折叠):在 <sgds-sidenav-item> 内放 <span slot="title"> 标题并提供 <sgds-sidenav-link> 子项。链接类型(直接跳转):在 <sgds-sidenav-item> 内直接放 <a>,不放 title 插槽和子链接。当前页高亮并自动展开分区:给 <sgds-sidenav-item> 加 active。链接级 active/disabled 用 <sgds-sidenav-link> 上的同名属性。粘性侧边栏:在 <sgds-sidenav> 上加 sticky(对应 position: sticky),需要父元素有足够高度并设置 overflow: auto 才能生效。嵌套最多支持到 L3(sidenav-item 套 sidenav-item)。

事件:仅菜单类型的 <sgds-sidenav-item> 触发 sgds-toggle、sgds-show、sgds-after-show、sgds-hide、sgds-after-hide;链接类型不触发。

限制:不暴露自定义属性与 CSS part,因此不支持自定义 CSS 样式修改。其余安装、依赖与兼容细节暂未提供。