Getting Started

复制一个包含安装步骤和本插件的完整 Markdown 指南的设置提示.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-pretty-toast`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/pretty-toast/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

安装

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

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

然后使用以下提示：

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';

显示 Toast

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

更新一个加载中的 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.

从 Getting Started 继续

如果您正在使用 Getting Started 来规划原生插件工作，连接它与 Capgo 插件目录产品工作流程在Capgo插件目录中 Capacitor插件由Capgo提供产品工作流程在Capacitor插件由Capgo提供添加或更新插件产品工作流程在添加或更新插件 Ionic企业插件替代品产品工作流程在Ionic企业插件替代品 Capgo原生构建产品工作流程在Capgo原生构建