”元素。 * Sileo 通过在设置操作系统首选项时禁用所有动画和过渡来尊重“prefers-reduced-motion: reduce”。 ** ** ## 架构（内部细节）了解 Sileo 的内部结构有助于调试或深度定制： 1. **全局存储：** 模块级单例（`store`）保存所有活动的 toast 并通过监听器 `Set` 通知 React。 `Toaster` 组件订阅此存储并在 toast 更改时重新呈现。 2. **Toast ID：** 当用户未提供 `id` 时，Toast 使用 `"sileo-default"` 作为其 id。这意味着在没有“id”的情况下重复调用“sileo.success(...)”将**替换**之前的 toast（相同 id 更新行为）。为同一状态的多个同时 toast 提供唯一的“id”。 3. **SVG Gooey 效果：** 每个 toast 都会渲染一个 `<svg>`： * 包含 `feGaussianBlur` 的 `<filter>` (stdDeviation = `roundness * 0.5`) + `feColorMatrix` \+ `feComposite` * 两个“<motion.rect>”元素（药丸+身体）通过“motion/react”弹簧过渡进行动画处理 * 粘稠过滤器在药丸和扩展卡之间产生有机的斑点合并效果 4. **弹簧物理：** 动画使用 `motion/react` 的弹簧过渡以及 `bounce: 0.25` 和计算的 `duration`（默认 0.6 秒）。 CSS 过渡使用相同弹簧曲线的“线性（）”缓动近似。 5. **展开方向：** `top-*`位置的Toast向下展开； `bottom-*` 位置的 toast 向上扩展（通过画布上的 CSS `scaleY(-1)` 变换）。 6. **计时器管理：** 每个 Toaster 实例管理每个 Toast 的自动关闭计时器。将鼠标悬停在任何 Toast 上都会暂停**所有**计时器；离开让他们恢复。这种悬停暂停行为是烤面包机级别的，而不是针对每个烤面包的。 7. **标题变形：** 当 Toast 的状态发生变化时（例如，通过 Promise 加载 -> 成功），标题会使用两个堆叠层（`current` \+ `prev`）在新旧状态之间执行基于模糊的交叉淡入淡出动画。 ** ** ## 集成清单 * 安装 `sileo` （并确保 `motion` 对等 dep 可用） * 在根布局中挂载**一个** `<Toaster />` * 根据上下文使用 `sileo.success/error/warning/info/show/action` * 对于异步流程，更喜欢 `sileo.promise(...)` * 对于主题，可以使用 `theme` prop 或手动 `fill` \+ `styles` \+ CSS 变量 * 对于程序化解雇，请使用“dismiss(id)”或“clear(...)” * 当多个 toast 同时共存时提供唯一的“id”值 ** ** ## 常见模式 ### 表单提交反馈 const handleSubmit = async (data: FormData) => { 等待 sileo.promise(saveForm(数据), { 加载：{ title：“正在保存...” }， success: { title: "表单已保存" }, 错误：（错误：任何）=>（{ title: "保存失败", 描述：错误？.消息， }), }); }; ### 撤消动作 toast const id = sileo.action({ title: "项目已删除", 描述：“此操作可以撤消”，持续时间：8000，按钮：{ 标题：“撤消”， onClick: () => { 恢复项目（项目ID）； sileo.dismiss(id); }, }, }); ### 多个同时 toast // 使用唯一的 id 来防止替换 sileo.info({ title: "正在下载文件 1...", id: "download-1", period: null }); sileo.info({ title: "正在下载文件 2...", id: "download-2", period: null }); // 单独关闭 sileo.dismiss(“download-1”); sileo.dismiss(“download-2”);</article></body></html>

# 技能：Sileo（反应 Toast 通知） > **官方文档：** **API参考：** **Toaster API：** **造型指南：** **游乐场：** **GitHub：** ** ** ## Sileo 是什么？ **Sileo** 是一个小型的、固执己见的、**基于物理的** React 的 Toast 组件。它使用 **gooey SVG 变形**（通过 `feGaussianBlur` \+ `feColorMatrix` 过滤器链）和 **spring 动画**（由 `motion/react` 提供支持，以前称为 Framer Motion）来创建黄油般平滑的通知，默认情况下零配置看起来很漂亮。 Sileo **不是**通用通知中心。它是一个高度抛光、视觉上独特的 Toast 系统，专为带有可选可扩展描述的单行反馈消息而设计。 **主要特征：** * 框架：**仅 React**（附带“使用客户端”指令以实现 Next.js App Router 兼容性） * 对等依赖：**`motion`**（spring 物理引擎，`motion/react`） * 架构：基于 SVG 的渲染，具有在药丸（折叠）和卡片（展开）状态之间变形的粘糊糊的斑点 * TypeScript-first：导出所有类型（`SileoOptions`、`SileoPosition`、`SileoState`、`SileoStyles`、`SileoButton`） * 辅助功能：在视口部分使用 `aria-live="polite"`，尊重 `prefers-reduced-motion` * 滑动关闭：内置基于指针事件的垂直滑动手势（30px 阈值） ** ** ## 安装 npm 安装 sileo Sileo 需要“react”和“motion”作为对等依赖项。 ** ** ## 快速设置 1. 在应用程序的根布局上安装“”**一次**。 2. 通过导入 `sileo` 从任何地方启动 toast。从“sileo”导入{ sileo，烤面包机}；导出默认函数 App() { 返回（ <> <烤面包机位置=“右上”/> <你的应用程序/> ）； } > 因为 `sileo` 附带了 `"use client"`，所以它可以在 Next.js App Router 中无缝工作，无需额外的包装器。 ** ** ## 基本用法 Sileo 公开了一个具有特定于状态的快捷方式的全局控制器“sileo”：从“sileo”导入{sileo}； // 状态快捷方式（每个都以字符串形式返回 toast `id`） sileo.success({ title: "已保存", description: "您的更改已存储。" }); sileo.error({ title: "失败", description: "无法保存。" }); sileo.warning({ title: "警告", description: "磁盘空间不足。" }); sileo.info({ title: "提示", description: "尝试新功能。" }); // 通用 toast （默认为成功，但接受动态状态的“type”） sileo.show({ title: "完成", type: "成功" }); // 动态状态选择 sileo.show({ 输入：response.ok？ “成功”：“错误”， title: "上传完成", }); ** ** ## 所有 `sileo` 方法方法|返回|描述 ---|---|--- `sileo.success（选项）` | `字符串` (id) |绿色成功祝酒 `sileo.error（选项）` | `字符串` (id) |红色错误吐司 `sileo.警告（选项）` | `字符串` (id) |琥珀色警告吐司 `sileo.info（选项）` | `字符串` (id) |蓝色信息吐司 `sileo.action（选项）` | `字符串` (id) |带操作按钮的吐司 `sileo.show(选项)` | `字符串` (id) |普通吐司。使用 `options.type` 作为状态，默认为 `"success"` `sileo.promise（承诺，选择）` | `承诺` |加载 -> 成功/错误流程。返回**原始承诺** `sileo.dismiss(id)` | `无效` |按 id 关闭特定 toast `sileo.clear（位置？）` | `无效` |清除所有 Toast，或仅清除特定位置的 Toast ** ** ## `SileoOptions` 传递给每个 `sileo.*()` 调用。道具|类型 |默认 |描述 ---|---|---|--- `标题` | `字符串` | \-- |吐司标题（显示在药丸中） `描述` | `ReactNode |字符串` | \-- |正文内容（展开时显示）。接受 JSX 以获得丰富的内容 `类型` | `西莱奥状态` | \-- | `sileo.show()` 的动态状态。 “成功”之一 | “正在加载” | “错误” | “警告”| “信息” | “行动”` `位置` | `SileoPosition` |烤面包机默认|覆盖此单个吐司的位置 `持续时间` | `数字|空` | `6000` |以毫秒为单位自动关闭。 `null` = 粘性（从不自动关闭） `图标` | `ReactNode |空` |状态图标|自定义图标替换徽章圈中的默认图标 `填充` | `字符串` | `“#FFFFFF”` | Toast 背景形状的 SVG 填充颜色 `风格` | `SileoStyles` | \-- |子元素的 CSS 类覆盖 `圆度` | `数字` | `16` | SVG 形状的边框半径（以像素为单位） `自动驾驶仪` | `布尔值| { 展开？：数量；崩溃？：数字}` | `真实` |自动展开/折叠定时。 `false` = 仅悬停 `按钮` | `SileoButton` | \-- |操作按钮配置 ** ** ## 动作吐司操作 toast 在扩展区域内包含一个可单击的按钮： sileo.action({ title: "新版本可用", 描述：“重新加载更新”，按钮：{ 标题：“重新加载”， onClick: () => window.location.reload(), }, }); ### `SileoButton` 接口 SileoButton { 标题：字符串； onClick: () => 无效; } ** ** ## 承诺吐司 `sileo.promise` 链接来自单个 Promise 的加载 -> 成功/错误状态。它返回**原始承诺**，以便您可以进一步链接。 * 第一个参数可以是 `Promise` **或函数** `() => Promise` （对于延迟执行很有用）。 * `success` 和 `error` 可以是接收已解决/拒绝值的静态选项或回调。 * 可选的“action”字段（如果提供）会用操作状态 toast 替换成功 toast。类型用户 = { 名称: 字符串 }; const 结果 =等待 sileo.promise(createUser(data), { load: { title: "正在创建帐户..." }, 成功：（用户）=>（{ title: `欢迎，${user.name}！`, }), 错误：（错误：任何）=>（{ title: "注册失败", 描述：错误？.消息？？ “未知错误”， }), }); // `result` 是解析后的 User 对象 **带有惰性承诺（函数）：** sileo.promise(() => fetch("/api/data").then((r) => r.json()), { load: { title: "正在获取数据..." }, success: { title: "数据已加载" }, 错误：{标题：“加载失败”}， }); **用行动代替成功：** sileo.promise<{ url: string }>(uploadFile(文件), { 加载中：{标题：“正在上传...”}， success: { title: "Uploaded" }, // 当 `action` 存在时忽略错误：{标题：“上传失败”}，行动：（数据）=>（{ title: "文件准备好", 描述：“点击打开”，按钮：{ 标题：“打开”， onClick: () => window.open(data.url), }, }), }); ### `SileoPromiseOptions` 接口 SileoPromiseOptions { 加载：SileoOptions；成功：SileoOptions | ((数据：T) => SileoOptions); 错误：SileoOptions | ((错误：未知) => SileoOptions); 行动？： SileoOptions | ((数据：T) => SileoOptions); 位置？：SileoPosition； } ** ** ## 职位六个职位可供选择。在 `` 上设置默认值，或覆盖每个 toast：输入 SileoPosition = | “左上角” | “顶部中心” | “右上角”//默认 | “左下角” | “底部中心” | “右下角”； <烤面包机位置=“底部中心”/> // 覆盖特定的 toast sileo.success({ title: "已保存", 位置: "左上角" }); 还导出“SILEO_POSITIONS”常量数组以进行迭代：从“sileo”导入{ SILEO_POSITIONS }； // 不从索引导出（内部） ** ** # 烤面包机（视口组件） `` 是渲染 toast 的视口组件。在您的根布局中添加**一次**。从“sileo”导入{烤面包机}； ## 道具道具|类型 |默认 |描述 ---|---|---|--- `孩子们` | `ReactNode` | \-- |与 toast 一起渲染的应用内容 `位置` | `SileoPosition` | `“右上角”` |所有 toast 的默认位置 `偏移` | `数字|字符串| { 上？，右？，下？，左？ }` | \-- |距视口边缘的距离 `选项` | `部分` | \-- |默认选项合并到每个 toast 中 `主题` | `“光” | “黑暗”| “系统”` | \-- |基于配色方案的自动填充。 “系统”遵循操作系统偏好 ## 主题 `theme` 属性会根据所选方案自动设置 toast `fill` 颜色，从而使您无需手动配置深色/浅色填充： * `"light"` -> 填充为`#1a1a1a`（浅色背景上的深色吐司）+浅色描述文本 * `"dark"` -> 填充为 `#f2f2f2`（深色背景上的浅色吐司）+ 深色描述文本 * `"system"` -> 遵循 `prefers-color-scheme` 媒体查询，根据操作系统更改进行反应式更新 <烤面包机位置=“右上”主题=“系统”/> 设置 `theme` 后，视口会渲染 `data-theme="light"` 或 `data-theme="dark"`，CSS 使用它们来自动设置描述文本不透明度的样式。 > 如果您在各个 Toast 上同时设置了“theme”和“fill”，则每个 Toast 的“fill”优先。 ## 偏移量接受数字 (px)、CSS 字符串或每面对象： <烤面包机偏移={20} /> <烤面包机偏移量=“1.5rem”/> <烤面包机偏移={{顶部：20，右侧：16}}/> ## 默认选项（全局） <烤面包机选项={{ 填写：“#171717”，样式：{ 描述：“text-white/75！” }, }} /> 每个 toast 都会继承这些默认值。每个 toast 选项会覆盖它们。 `styles` 对象是浅合并的（每个 toast 样式覆盖全局样式）。 ** ** # 造型 Sileo 开箱即用，看起来很棒。当需要定制时，有几个逃生舱口。 ## 填充颜色 `fill` 设置 toast 形状的 SVG 背景颜色。默认值：`“#FFFFFF”`。对于深色吐司，请使用深色“填充”，并通过“样式”将其与浅色文本配对： sileo.成功（{ 标题：“黑吐司”，填写：“#171717”，样式：{ title: "文本-白色！", 描述：“文本-白色/75！”， }, }); ## 样式覆盖（`styles`）覆盖各个子元素上的 CSS 类。使用 Tailwind 时，请添加“!”以确保特殊性。 ### `SileoStyles` 接口 SileoStyles { 标题？：字符串； // 标题文本描述？：字符串； // 正文/描述区域徽章？：字符串； // 图标徽章圆圈按钮？：字符串； // 操作按钮 } ### 可用的数据属性选择器关键|元素| CSS选择器 ---|---|--- `标题` |标题文字 | `[数据-sileo-标题]` `描述` |正文/描述区域 | `[数据-sileo-描述]` `徽章` |图标徽章圈| `[数据-sileo-徽章]` `按钮` |操作按钮| `[数据硅按钮]` 可用于 CSS 定位的其他数据属性：选择器|描述 ---|--- `[数据-sileo-toast]` |最外面的 toast 元素（`

Sileo 反应吐司

包含技能