@ capgo/ 电容- pretty- toast

在您的 Capacitor app 中显示美丽的吐司通知, 上面有 iOS 和 Android 的土生土长 和 网页上的 DOM 渲染器 。 一样 toast.* API作为反应-内在- pretty-toast.

🤖 建筑与AI编码代理? 安装 Capgo 技能 所以克劳德代码,代码,光标,副驾驶,或双子座CLI知道如何安装和使用 @capgo/capacitor-pretty-toast 在您的电容应用程序中: npx skills add Cap-go/capgo-skills。然后问你的经纪人: 加上@capgo/capor- pretty-toast到我的Capacitor应用上并把它接上 代理设置指南 • 妇女 主机磁共振

主要特点

• 备选案文数字 : success(), (中文(简体) ), error(), (中文(简体) ), info(), (中文(简体) ), warning(), (中文(简体) ), loading() 完全习惯 show()。 。 。 .
• 保证祝酒词数字 : promise() 显示装入,然后在您的承诺到期时成功或出错.
• 实时更新数字 : update() 换个敬酒的地方, dismiss() 财务报告和审定财务报表 dismissAll() 关上他们.
• 排队: 默认情况下的土司队列,以及 force 把新吐司放在第一位, 并显示它当 现在的吐司解散.
• 图标: 符号图标和原始SVG通过 icon,并图像 URI 通过 iconSource。 。 。 .
• 平台: iOS,Android和Web. 互联网档案馆的存檔,存档日期2013-12-02.

这个包保留了熟悉的 toast.* 从地表从 react-native-pretty-toast,但作为电容插件的船舶:

• iOS和Android上本土覆盖.
• a 网上DOM渲染器.
• 队列中, force, (中文(简体) ), update, (中文(简体) ), dismiss, (中文(简体) ), dismissAll,以及 promise
• 符号图标,原始 SVG 通过 icon,并且基于 URI 的图像通过 iconSource

安装

您可以使用我们的 AI 辅助设置安装插件 。 使用以下命令将 Capgo 技能添加到您的 AI 工具 :

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

然后使用下列提示:

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-pretty-toast` plugin in my project.

如果您更喜欢手动设置,请通过运行以下命令来安装插件,并遵循下面的平台特定指令:

bun add @capgo/capacitor-pretty-toast

然后同步本地平台 :

bunx cap sync

使用量

import { toast } from '@capgo/capacitor-pretty-toast';

toast.success('Saved', {
  message: 'Your changes are already on disk.',
});

const id = toast.loading('Uploading', {
  message: 'This toast stays visible until you update it.',
});

setTimeout(() => {
  toast.update(id, {
    title: 'Upload complete',
    message: 'Updated in place without replaying the enter animation.',
    icon: 'checkmark.circle.fill',
    autoDismiss: true,
  });
}, 1500);

API 密码

• show(...)
• success(...)
• error(...)
• info(...)
• warning(...)
• loading(...)
• update(...)
• promise(...)
• dismiss(...)
• dismissAll()
• 接口
• 类型异名

公共土司控制器被曝光为 toast。 。 。 .

显示(...)

show(config: ToastConfig, options?: ShowOptions | undefined) => string

显示自定义的敬酒并返回其ID.

回返情况: string

成功(...)

success(title: string, config?: ToastConfig | undefined, options?: ShowOptions | undefined) => string

祝你们成功.

回返情况: string

错误(...)

error(title: string, config?: ToastConfig | undefined, options?: ShowOptions | undefined) => string

显示一个错误的烤面包.

回返情况: string

信息(...)

info(title: string, config?: ToastConfig | undefined, options?: ShowOptions | undefined) => string

展示一个信息祝酒.

回返情况: string

警告(...)

warning(title: string, config?: ToastConfig | undefined, options?: ShowOptions | undefined) => string

来个警告祝酒词.

回返情况: string

装入(...)

loading(title: string, config?: ToastConfig | undefined, options?: ShowOptions | undefined) => string

举起手来 装入土司不会自动解除.

回返情况: string

更新(...)

update(id: string, partial: ToastConfig) => void

以 id 更新现有的祝酒词 .

承诺(...)

promise<T>(promise: Promise<T>, messages: PromiseMessages<T>) => Promise<T>

在等待承诺时显示加载祝酒, 然后更新其成功或出错 .

回返情况: Promise<T>

开除(...)

dismiss(id?: string | undefined) => void

以身份解除一个土司, 或目前的土司 当没有身份证明时.

全部删除( C)

dismissAll() => void

解除现在的祝酒词 并清除队列.

接口

土司组合

敬酒行动

显示选项

类型异名

图标来源

string | { uri: string }

承诺

{ loading: string | ToastConfig; success: string | ((value: T) => string | ToastConfig); error: string | ((error: unknown) => string | ToastConfig); }

注释:

• Raw SVG 只能通过 icon。 。 。 .
• iconSource 总是优先于 icon。 。 。 .
• toast.loading() 默认 autoDismiss 改为 false。 。 。 .

示例应用

重罚包括: example-app/,一个基于 Vite 的 Capacitor 应用程序,其演示用于:

• 每个 toast.* 方法
• 队列和 force
• 现场直播 update
• dismiss 财务报告和审定财务报表 dismissAll
• promise
• 符号图标
• 原始 SVG 图标
• 远程和数据-URL iconSource 数值
• 可重复捕获模式 ?demo=hero, (中文(简体) ), ?demo=flow,以及 ?demo=update

?demo=flow 是 README 视频中使用的 promo 出入口形态. 运出视频既显示Android剪接路径,也显示以岛为中心并排的路径.

本地运行 :

cd example-app
bun install
bun run start

发展

bun install
bun run build
bun test
bun run verify