toastify js

Toastify

Toastify adalah perpustakaan pemberitahuan Vanilla JS Toast yang ringan.

Demo

klik disini

Fitur

• Beberapa pemberitahuan bertumpuk

• Dapat disesuaikan

• Tidak ada pemblokiran utas eksekusi

Opsi Kustomisasi

• Teks pemberitahuan

• Lamanya

• Warna latar belakang roti panggang

• Tutup tampilan ikon

• Posisi tampilan

• Posisi offset

Instalasi

Toastify sekarang mendukung instalasi melalui NPM

• Jalankan perintah di bawah ini untuk menambahkan Toastify-Js ke proyek Anda yang ada atau baru.

npm install --save toastify-js

atau

yarn add toastify-js -S

• Impor Toastify-J ke modul Anda untuk mulai menggunakannya.

import Toastify from 'toastify-js'

Anda dapat menggunakan CSS default dari Toastify seperti di bawah ini dan kemudian menimpanya atau memilih untuk menulis CSS Anda sendiri.

import "toastify-js/src/toastify.css"

Menambahkan ToastifyJ ke halaman HTML menggunakan metode tradisional

Untuk mulai menggunakan Toastify , tambahkan CSS berikut ke halaman Anda.

 <tautan rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

Dan skrip di bagian bawah halaman

 <type script = "Text/JavaScript" src = "https://cdn.jsdelivr.net/npm/toastify-js"> </script>

File dikirim melalui layanan CDN yang disediakan oleh JSDeliver

Dokumentasi

 Toastify ({
  Teks: "Ini roti panggang",
  Durasi: 3000,
  Tujuan: "https://github.com/apvarun/toastify-js",
  NewWindow: Benar,
  Tutup: Benar,
  Gravitasi: "Top", // `Top` atau` Bottom`
  Posisi: "kiri", // `left`,` center` atau `right`
  Stoponfocus: Benar, // mencegah pemberhentian bersulang saat melayang
  style: {latar belakang: "linear-gradient (ke kanan, #00b09b, #96c93d)",
  },
  OnClick: function () {} // Callback setelah klik}). ShowToast ();

Pesan roti panggang akan dipusatkan pada perangkat dengan lebar layar kurang dari 360px.

• Lihat Changelog

Tambahkan Kelas Kustom Sendiri

Jika Anda ingin menggunakan kelas kustom pada roti panggang untuk menyesuaikan (seperti info atau peringatan misalnya), Anda dapat melakukannya sebagai berikut:

 Toastify ({
  Teks: "Ini roti panggang",
  ClassName: "Info",
  style: {latar belakang: "linear-gradient (ke kanan, #00b09b, #96c93d)",
  }}). ShowToast ();

Beberapa kelas juga dapat ditetapkan sebagai string, dengan spasi di antara nama kelas.

Tambahkan beberapa offset

Jika Anda ingin menambahkan offset ke roti panggang, Anda dapat melakukannya sebagai berikut:

 Toastify ({
  Teks: "Ini bersulang dengan offset",
  Offset: {x: 50, // Sumbu horizontal - Dapat berupa angka atau string yang menunjukkan Unity. misalnya: '2em'y: 10 // Sumbu vertikal - dapat berupa angka atau string yang menunjukkan Unity. misalnya: '2em'
  },}). ShowToast ();

Toast akan didorong 50px dari kanan di sumbu x dan 10px dari atas di sumbu y.

Catatan:

Jika position sama dengan left , itu akan didorong dari kiri. Jika gravity sama dengan bottom , itu akan didorong dari bawah.

API

Kunci opsi	jenis	Penggunaan	Default
teks	rangkaian	Pesan yang akan ditampilkan di Toast	"Hai, yang di sana!"
node	Element_node	Berikan node untuk dipasang di dalam roti panggang. node lebih tinggi diutamakan daripada text
lamanya	nomor	Durasi yang harus ditampilkan. -1 untuk roti panggang permanen	3000
pemilih	String | Element_node	Shadowroot	Pemilih css atau node elemen tempat roti panggang harus ditambahkan
tujuan	String url	URL tempat browser harus dinavigasi pada klik roti panggang
Newwindow	Boolean	Memutuskan apakah destination harus dibuka di jendela baru atau tidak	PALSU
menutup	Boolean	Untuk menunjukkan ikon dekat atau tidak	PALSU
gaya berat	"Top" atau "Bottom"	Untuk menunjukkan roti panggang dari atas atau bawah	"atas"
posisi	"Kiri" atau "kanan"	Untuk menunjukkan bersulang di kiri atau kanan	"Kanan"
latar belakang warna	Nilai latar belakang CSS	Untuk menjadi sudah usang, gunakan Opsi style.background sebagai gantinya. Mengatur warna latar belakang roti panggang
Avatar	String url	Gambar/ikon yang akan ditampilkan sebelum teks
ClassName	rangkaian	Kemampuan untuk memberikan nama kelas khusus untuk kustomisasi lebih lanjut
stoponfocus	Boolean	Untuk menghentikan pengatur waktu saat melayang di atas roti panggang (hanya jika durasi diatur)	BENAR
panggilan balik	Fungsi	Dipanggil saat roti panggang diberhentikan
Onclick	Fungsi	Dipanggil saat roti panggang diklik
mengimbangi	Obyek	Kemampuan untuk menambahkan beberapa offset ke sumbu
Escapemarkup	Boolean	Beralih perilaku default dari markup HTML	BENAR
gaya	obyek	Gunakan Properti Gaya DOM HTML untuk menambahkan gaya apa pun secara langsung ke Toast
Arialive	rangkaian	Mengumumkan roti panggang untuk menyaring pembaca, lihat https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_region untuk opsi untuk opsi	"sopan"
Tua	Boolean	Atur urutan roti panggang ditumpuk di halaman	BENAR

Properti yang sudah usang: backgroundColor - Gunakan Opsi style.background Sebaliknya

Dukungan Browser

Yaitu / tepi	Firefox	Chrome	Safari	Opera
IE10, IE11, Edge	10 versi terakhir	10 versi terakhir	10 versi terakhir	10 versi terakhir

Kontributor

Astoker	Caiomoura1994	rndevfx	1ess	D4RN0K	Danielkaiser80
skjnldsv	Chasedeanda	Chrisgraham	Wachiwi	Feixuruins	Gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	mort3za	Sandip124	Tadaz
t12ung	VictorfeJo	fiatjaf	Prousseau-Korem

Lisensi

Mit © varun ap