# @capgo/capacitor-pretty-toast 中文文档

规范地址：https://npmcn.com/package/%40capgo/capacitor-pretty-toast/

版本：8\.1\.28
npm 元数据更新时间：2026-11-02T07:03:08.703Z
中文译文更新时间：2026-11-09T04:00:39.362Z
软件包许可：MPL-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40capgo/capacitor-pretty-toast
原文对照：https://npmcn.com/package/%40capgo/capacitor-pretty-toast/?lang=original
项目主页：https://capgo.app/docs/plugins/pretty-toast/
源码仓库：https://github.com/Cap-go/capacitor-pretty-toast

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：474 kB，86 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@capacitor/core \>=8\.0\.0
- 首次发布：2026-05-21T13:23:49.964Z
- 最新版本发布：2026-11-02T07:03:08.338Z
- 近 30 天下载量：40849（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：29（近 12 个月 29 个）

## 中文简介

土著第一漂亮土司通知 capacitor和网络

## 安装

```sh
npm install @capgo/capacitor-pretty-toast
```

也可以使用：`pnpm add @capgo/capacitor-pretty-toast`、`yarn add @capgo/capacitor-pretty-toast`、`bun add @capgo/capacitor-pretty-toast`

## README

# @ capgo/ 电容- pretty- toast

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

[![Capgo - Build Capacitor apps with AI, ship updates instantly](https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-pretty-toast)](https://capgo.app/?ref=plugin_pretty_toast)

**队长**:在几分钟内将修正推给您的 Capacitor 用户,在没有Mac的情况下构建已签名的iOS和Android apps,并在一击中回滚.

## [\*免费开始\*](https://capgo.app/register/?ref=plugin_pretty_toast)

14天无限自由审判. 不需要信用卡

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

![Animated Pretty Toast demo on an external device](https://raw.githubusercontent.com/Cap-go/capacitor-pretty-toast/main/.github/assets/readme-demo.webp)

## 主要特点

-   **备选案文**数字 : `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 工具 :

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

然后使用下列提示:

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

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

```bash
bun add @capgo/capacitor-pretty-toast
```

然后同步本地平台 :

```bash
bunx cap sync
```

## 使用量

```ts
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(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-show)
-   [`success(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-success)
-   [`error(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-error)
-   [`info(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-info)
-   [`warning(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-warning)
-   [`loading(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-loading)
-   [`update(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-update)
-   [`promise(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-promise)
-   [`dismiss(...)`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-dismiss)
-   [`dismissAll()`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-dismissall)
-   [接口](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-interfaces)
-   [类型异名](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-type-aliases)

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

### 显示(...)

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

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

| 参数 | 类型 |
| --- | --- |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 成功(...)

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

祝你们成功.

| 参数 | 类型 |
| --- | --- |
| **`title`** | `string` |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 错误(...)

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

显示一个错误的烤面包.

| 参数 | 类型 |
| --- | --- |
| **`title`** | `string` |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 信息(...)

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

展示一个信息祝酒.

| 参数 | 类型 |
| --- | --- |
| **`title`** | `string` |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 警告(...)

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

来个警告祝酒词.

| 参数 | 类型 |
| --- | --- |
| **`title`** | `string` |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 装入(...)

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

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

| 参数 | 类型 |
| --- | --- |
| **`title`** | `string` |
| **`config`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |
| **`options`** | `[ShowOptions](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-showoptions)` |

**回返情况:** `string`

* * *

### 更新(...)

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

以 id 更新现有的祝酒词 .

| 参数 | 类型 |
| --- | --- |
| **`id`** | `string` |
| **`partial`** | `[ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)` |

* * *

### 承诺(...)

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

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

| 参数 | 类型 |
| --- | --- |
| **`promise`** | `Promise<T>` |
| **`messages`** | `[PromiseMessages](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-promisemessages)<T>` |

**回返情况:** `Promise<T>`

* * *

### 开除(...)

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

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

| 参数 | 类型 |
| --- | --- |
| **`id`** | `string` |

* * *

### 全部删除( C)

```typescript
dismissAll() => void
```

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

* * *

### 接口

#### 土司组合

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`id`** | `string` | 可选稳定土司ID。 省略时返回生成的 id . |
| **`icon`** | `string` | 接受类似 SF- symbol 的标识符或原始 SVG 标记。 SVG 模式仅在字符串开始时启用 `&lt;svg` 修补后. |
| **`iconSource`** | `[IconSource](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-iconsource)` | URI类似图像源. 支助 `https://`, (中文(简体) ), `http://`, (中文(简体) ), `file://`,绝对文件路径, `data:` URL( URL) , (中文), `blob:` URL,或 网络 `{ uri }`。 。 。 . `iconSource` 总是胜出 `icon`。 。 。 . |
| **`title`** | `string` | 主吐司头衔. |
| **`message`** | `string` | 二级祝酒词. |
| **`duration`** | `number` | 自动解除延迟数以毫秒计. |
| **`autoDismiss`** | `boolean` | 土司是否在之后就放弃了 `duration`。 。 。 . |
| **`enableSwipeDismiss`** | `boolean` | 是否在本地覆盖上启用了刷相到发相 . |
| **`accentColor`** | `string` | CSS风格的口音颜色被本地/网络渲染器所使用. |
| **`strokeColor`** | `string` | CSS风格的边框/中风颜色. |
| **`disableBackdropSampling`** | `boolean` | 禁用土司后面的Android/iOS背景取样. |
| **`action`** | `[ToastAction](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastaction)` | 可选动作按钮配置 . |
| **`accessibilityAnnouncement`** | `string` | 土司显示时, 将文字宣布为辅助技术 . |
| **`onPress`** | `(() => void)` | 烤面包的时候叫的 吐司总是会丢掉的. |
| **`onShow`** | `(() => void)` | 当吐司显出时调用. |
| **`onHide`** | `(() => void)` | 土司解散后打电话来. |
| **`onAutoDismiss`** | `(() => void)` | 当吐司被其计时器解聘时召去. |

#### 敬酒行动

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`label`** | `string` | 为本地/网络动作按钮显示文本 . |
| **`onPress`** | `() => void` | 按下动作按钮时调用 . |

#### 显示选项

| Prop | 类型 | 说明 |
| --- | --- | --- |
| **`force`** | `boolean` | 解除现在的祝酒词 立即展示这个. |

### 类型异名

#### 图标来源

`string | { uri: string }`

#### 承诺

`{ loading: string | [ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig); success: string | ((value: T) => string | [ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)); error: string | ((error: unknown) => string | [ToastConfig](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/#readme-toastconfig)); }`

注释:

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

## 示例应用

重罚包括: [`example-app/`](https://npmcn.com/package/%40capgo/capacitor-pretty-toast/example-app),一个基于 Vite 的 Capacitor 应用程序,其演示用于:

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

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

本地运行 :

```bash
cd example-app
bun install
bun run start
```

## 发展

```bash
bun install
bun run build
bun test
bun run verify
```

## 常见问题

### @capgo/capacitor-pretty-toast 是什么？

土著第一漂亮土司通知 capacitor和网络

### 如何安装 @capgo/capacitor-pretty-toast？

在项目目录运行 npm install @capgo/capacitor-pretty-toast，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@capacitor/core（\>=8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @capgo/capacitor-pretty-toast 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @capgo/capacitor-pretty-toast 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @capgo/capacitor-pretty-toast 可以商用吗？

@capgo/capacitor-pretty-toast 使用 MPL-2\.0 许可。弱 Copyleft：可以商用，也可以和闭源代码一起使用；但如果分发时修改了 MPL 授权的文件，这些文件的修改需以 MPL 开源。以上为概括，不构成法律意见，请以许可原文为准。

### @capgo/capacitor-pretty-toast 的下载量有多少？

根据 npm 官方下载统计，@capgo/capacitor-pretty-toast 在 2026/10/09 – 2026/11/07 这 30 天内被下载 40,849 次，日均约 1,362 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @capgo/capacitor-pretty-toast 还在维护吗？

最新版本 8\.1\.28 发布于 2026/11/02（7 天前）；至今共发布 29 个版本，其中过去 12 个月发布了 29 个；首次发布于 2026/05/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。