SuperAPI AI 工具集

sgds-components-breadcrumb

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:sgds-breadcrumb 用于渲染展示用户在页面层级中位置的面包屑导航路径,每一步由 sgds-breadcrumb-item 包裹一个标准 <a> 标签组成。

主要能力:每个 sgds-breadcrumb-item 内必须放且只放一个 <a> 标签,不能直接放纯文本。最后一个条目(当前页)由父组件自动设置 aria-current="page" 和 active=true,无需手动设置。当条目达到 5 个或以上时,中间条目会自动折叠进 sgds-overflow-menu 溢出菜单,无需任何配置。sgds-breadcrumb 支持 ariaLabel 属性(字符串,默认 "breadcrumb"),用于设置外层 <nav> 的 aria-label。两个组件均无自定义事件,且不暴露自定义属性与 CSS part,因此不支持 CSS 样式修改。

使用方式:先参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular 的集成方式不同)。基本写法为在 sgds-breadcrumb 内依次放置多个 sgds-breadcrumb-item,每项内嵌一个 <a href>。示例:<sgds-breadcrumb><sgds-breadcrumb-item><a href="/">Home</a></sgds-breadcrumb-item><sgds-breadcrumb-item><a href="/about">About</a></sgds-breadcrumb-item></sgds-breadcrumb>。可通过 ariaLabel="Site navigation" 自定义导航标签。

适用场景:需要展示页面层级位置、支持多级路径导航的 Web 界面。

限制:不要使用手写 <nav><ol><li> 模式替代;不要手动设置最后一项的 active 或 aria-current;不支持样式定制;溢出折叠行为自动触发,无法配置。