SuperAPI AI 工具集

sgds-components-toast

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

用途:sgds-toast 是简短、非阻塞的通知组件,sgds-toast-container 负责在屏幕上定位一个或多个 toast。toast 必须同时包含标题和消息,可选图标与操作链接。

主要能力:variant 支持 info(默认)、success、danger、warning、neutral;autohide 配合 delay(毫秒,默认 5000)实现自动消失;dismissible 显示关闭按钮;noAnimation 关闭动画。容器 position 支持 top-center、top-end、bottom-start、bottom-center、bottom-end;top-start、middle-start、middle-center、middle-end 自 3.7.1 起已弃用,应避免使用,默认推荐 bottom-end。

使用方式:需先参考 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)。页面加载即显示需在 toast 上设置 show;程序化控制用 showToast() / hideToast()。toast 必须包裹在 sgds-toast-container 内,同一容器内多个 toast 会自动纵向堆叠。插槽:icon 放 sgds-icon,默认插槽为消息正文,action 放 sgds-link 包裹 a 标签。事件:sgds-show、sgds-after-show、sgds-hide、sgds-after-hide,均不可取消。

限制:该组件不暴露自定义属性与 CSS part,不能修改 CSS 样式;title 为无障碍必需项,必须设置。