Primeros pasos

Instalar

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

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

Luego usa el siguiente prompt:

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

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

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

Importar

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

Inicio rápido

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

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

Errores comunes

• Cargando ids: mantén los ids al llamar toast.update().
• Debouncing: los errores rápidos deben agruparse en un solo toast.
• Branding: ajusta iconos y colores por plataforma.

Mostrar un toast

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

Actualizar un toast de carga

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

Seguir una promesa

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

Iconos e imágenes

Usa icon para un nombre de símbolo o marcado SVG puro:

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

Usa iconSource para imágenes tipo URI. Soporta https://, http://, file://, data:, blob:, rutas de archivos absolutas, o { uri }.

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

iconSource tiene prioridad sobre icon.

Continúa desde Getting Started

Si estás usando Primeros pasos para planificar el trabajo con plugins nativos, conéctalo con Directorio de plugins de Capgo para el flujo de trabajo del producto en Capgo Plugin Directory, Plugins de Capacitor por Capgo para el detalle de implementación en los Plugins de Capacitor por Capgo, Añadir o actualizar plugins para el detalle de implementación en Agregar o actualizar plugins, Alternativas a plugins de Ionic Enterprise para el flujo de trabajo en Alternativas a plugins de Ionic Enterprise, y Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds.