Erste Schritte

Installieren

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

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

Nutze dann diesen Prompt:

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

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

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

Importieren

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

Quickstart

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

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

Häufige Stolperfallen

• Lade IDs: IDs beim Aufruf beibehalten toast.update().
• Debouncing: Schnelle Fehler sollten in einer Toast zusammengefasst werden.
• Branding: Icons und Farben pro Plattform anpassen.

Toast anzeigen

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

Loading-Toast aktualisieren

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 tracken

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

Icons und Bilder

Nutzt icon für einen Icon-Namen oder rohes SVG-Markup:

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

Nutzt iconSource für URI-ähnliche Bilder. Es unterstützt https://, http://, file://, data:, blob:, absolute Dateipfade oder { uri }.

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

iconSource hat Vorrang vor icon.

Weiter geht's nach Getting Started

Wenn du es nutzt Erste Schritte Um die Arbeit an nativen Plugins zu planen, verbinde sie mit Capgo Plugin-Verzeichnis für den Produkt-Workflow im Capgo Plugin-Verzeichnis, Capacitor Plugins von Capgo für das Implementierungsdetail in Capacitor Plugins von Capgo, Plugins hinzufügen oder aktualisieren für die Implementierungsdetails unter „Plugins hinzufügen oder aktualisieren“, Ionic Enterprise Plugin-Alternativen für den Produkt-Workflow in Ionic Enterprise Plugin-Alternativen und Capgo Native Builds optimieren für den Produkt-Workflow in Capgo Native Builds.