SuperAPI AI 工具集

sgds-components-system-banner

通用与其它

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-system-banner> 用于在页面顶部展示站点级公告,可包含一条或多条 <sgds-system-banner-item> 消息,多条时每 5 秒自动轮播,并提供分页指示点。适合计划维护通知、系统状态更新等场景。组件应放置在 <sgds-masthead> 和 <sgds-mainnav> 之上。

主要属性(sgds-system-banner):show(布尔,默认 false,控制可见性,默认隐藏);dismissible(布尔,默认 false,显示关闭按钮以关闭整个横幅);fluid(布尔,默认 false,使用全宽容器);noClampAction(布尔,默认 false,避免 action 插槽文本或按钮被截断)。<sgds-system-banner-item> 无属性。

插槽:横幅默认插槽放 item 元素;item 的 icon 插槽放 <sgds-icon size="md">,默认插槽放公告文本,action 插槽放链接或按钮。事件:sgds-show(开始显示)、sgds-hide(开始隐藏,均不可取消)。组件没有公开方法。

用法要点:必须设置 show 才可见;多条 item 自动出现分页点并每 5 秒轮播;action 插槽建议用 <sgds-link variant="light"> 或 <sgds-button tone="fixed-light" variant="outline"> 以适配深色背景。

限制:不可修改 CSS 样式,组件未暴露自定义属性与 CSS 部件。安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)参见 sgds-components-setup。