快速入门

安装

你可以使用我们的 AI 辅助设置来安装插件。使用以下命令将 Capgo skills 添加到你的 AI 工具中：

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

然后使用以下 prompt：

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

如果你更想手动设置，请运行以下命令安装插件，并按照下方各平台的说明操作：

npm install @capgo/capacitor-pretty-toast
npx cap sync

导入

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

快速入门

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

toast.success('Saved', { message: 'Draft synced.' });

常见坑点

• 加载 ID：调用时保留 ID toast.update().
• 防抖：快速错误应合并为一个 toast。
• 品牌定制：按平台调整图标和颜色。

显示 Toast 提示

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

更新 Loading Toast

const id = toast.loading('Uploading', {
  message: 'Waiting for the server response.',
});

setTimeout(() => {
  toast.update(id, {
    title: 'Upload complete',
    message: 'The file was stored successfully.',
    icon: 'checkmark.circle.fill',
    autoDismiss: true,
  });
}, 1500);

追踪 Promise

await toast.promise(uploadFile(), {
  loading: {
    title: 'Uploading',
    message: 'Keep the app open while the file is sent.',
  },
  success: 'Uploaded',
  error: 'Upload failed',
});

图标与图片

使用 icon 可输入符号名称或原始 SVG 标记：

toast.info('New message', {
  icon: 'message.fill',
  message: 'Open the inbox to reply.',
});

使用 iconSource 用于 URI 类图像。它支持 https://, http://, file://, data:, blob:，绝对文件路径，或 { uri }.

toast.show({
  title: 'Profile updated',
  message: 'Your avatar changed.',
  iconSource: 'https://example.com/avatar.png',
});

iconSource 优先于 icon.

从入门指南继续

如果你正在使用 快速入门 要规划原生插件工作，请将其与 Capgo 插件目录 查看 Capgo 插件目录中的产品工作流， Capgo 提供的 Capacitor 插件 查看由 Capgo 提供的 Capacitor 插件中的实现细节， 添加或更新插件 查看添加或更新插件中的实现细节， Ionic Enterprise 插件替代方案 查看 Ionic Enterprise 插件替代方案中的产品工作流，以及 Capgo Native Build 查看 Capgo Native Builds 中的产品工作流。