Skip to content

Gyors kezdés

Ez a rész olyan, hogy gyorsan “be lehet dobni” egy projektbe.

Toast típusok

js
FToast.success("Mentve ✅");
FToast.info("Frissítve");
FToast.warning("Figyelj: közel a limit");
FToast.error("Hálózati hiba");

A típusok defaultja a types map-ben van. Ha új típust akarsz, lásd: Types referencia.

Per-toast beállítás

A config() globális defaultot állít. Ha csak egyszer akarod felülírni:

js
FToast.info("Ez sticky", {
  duration: 0,
  showProgress: false,
  closeOnClick: false
});

Tippek:

  • duration: 0 = sticky (amíg le nem zárod)
  • closeOnClick: false = ne záródjon be véletlen kattintásra

Action gombok (mini CTA a toastban)

js
FToast.warning("Lehet, hogy most érdemes ránézni.", {
  duration: 0,
  actions: [
    { text: "Megnyitás", variant: "info", icon: "fa-solid fa-arrow-right", onClick: () => console.log("open") },
    { text: "Mégse", variant: "outline", icon: "fa-solid fa-xmark" }
  ]
});

Miért jó az actions[]?

  • Nem kell külön modal minden kis döntéshez
  • UX-ben közel van a kontextushoz (toast = esemény)

Dialógusok (SweetAlert2-szerű)

js
await FToast.alert("Kész!", { type: "success", title: "Mentés" });

const ok = await FToast.confirm("Biztos törlöd?", {
  title: "Törlés",
  type: "warning",
  okText: "Törlés",
  okVariant: "danger",
  cancelText: "Mégse",
  cancelVariant: "outline"
});

const value = await FToast.prompt("Adj meg egy nevet:", {
  title: "Beállítás",
  placeholder: "pl. Example",
  initialValue: ""
});

A dialógusok Promise-ot adnak vissza, ami nagyon kényelmes async/await mellett.

Következő: Fogalmak →