تنزيل toastify js - تنزيل رمز المصدر toastify js

toastify js

شفرة المصدر الأخرى

1.12.0

تنزيل

توست

Toastify هي مكتبة إخطار Toast خفيفة الوزن ، فانيلا JS.

العرض التوضيحي

انقر هنا

سمات

إخطارات مكدسة متعددة
قابل للتخصيص
لا حظر لخيط التنفيذ

خيارات التخصيص

نص الإخطار
مدة
لون الخلفية نخب
أغلق عرض الرمز
عرض الموضع
موقف الإزاحة

تثبيت

يدعم Toastify الآن التثبيت عبر NPM

قم بتشغيل الأمر أدناه لإضافة Toastify-JS إلى مشروعك الحالي أو الجديد.

npm install --save toastify-js

أو

yarn add toastify-js -S

استيراد Toastify-Js في الوحدة النمطية الخاصة بك لبدء استخدامه.

import Toastify from 'toastify-js'

يمكنك استخدام CSS الافتراضي من Toastify على النحو التالي وتجاوزه لاحقًا أو اختيار كتابة CSS الخاصة بك.

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

إضافة ToastifyJS إلى صفحة HTML باستخدام الطريقة التقليدية

لبدء استخدام Toastify ، أضف CSS التالية إلى صفحتك.

 <link Rel = "STYLESHEET" type = "text/css" href = "https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

والنص في أسفل الصفحة

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

يتم تسليم الملفات عبر خدمة CDN التي توفرها JSDeLiver

الوثائق

 Toastify ({
  النص: "هذا نخب" ،
  المدة: 3000 ،
  الوجهة: "https://github.com/apvarun/toastify-js" ،
  NewWindow: صحيح ،
  إغلاق: صحيح ،
  الجاذبية: "أعلى" ، // "أعلى" أو "أسفل"
  الموضع: "اليسار" ، // "اليسار" ، "مركز" أو "يمين"
  stoponfocus: صحيح ، // يمنع رفض الخبز المحمص على التحويم
  النمط: {Background: "Linear-Radient (إلى اليمين ، #00b09b ، #96c93d)" ،
  } ،
  onClick: function () {} // callback بعد النقر}). showtoast () ؛

ستتمحور رسائل الخبز المحمص على الأجهزة ذات عرض الشاشة أقل من 360 بكسل.

انظر changelog

إضافة فصول مخصصة خاصة

إذا كنت ترغب في استخدام فئات مخصصة على الخبز المحمص للتخصيص (مثل المعلومات أو التحذير على سبيل المثال) ، فيمكنك القيام بذلك على النحو التالي:

 Toastify ({
  النص: "هذا نخب" ،
  ClassName: "معلومات" ،
  النمط: {Background: "Linear-Radient (إلى اليمين ، #00b09b ، #96c93d)" ،
  }}). showtoast () ؛

يمكن أيضًا تعيين فئات متعددة كسلسلة ، مع مسافات بين أسماء الفصول.

إضافة بعض الإزاحة

إذا كنت ترغب في إضافة إزاحة إلى الخبز المحمص ، فيمكنك القيام بذلك على النحو التالي:

 Toastify ({
  النص: "هذا نخب مع إزاحة" ،
  الإزاحة: {x: 50 ، // يمكن أن يكون المحور الأفقي - رقمًا أو سلسلة تشير إلى الوحدة. على سبيل المثال: '2em'y: 10 // المحور العمودي - يمكن أن يكون رقمًا أو سلسلة تشير إلى الوحدة. على سبيل المثال: '2em'
  } ،}). showtoast () ؛

سيتم دفع نخب 50 بكسل من اليمين في محور X و 10 بكسل من الأعلى في محور Y.

ملحوظة:

إذا كان position يساوي left ، فسيتم دفعه من اليسار. إذا كانت gravity متساوية في bottom ، فسيتم دفعها من أسفل.

API

مفتاح الخيار	يكتب	الاستخدام	الافتراضات
نص	خيط	الرسالة التي سيتم عرضها في الخبز المحمص	"أهلاً!"
العقدة	element_node	توفير عقدة ليتم تركيبها داخل الخبز المحمص. `node` تأخذ الأسبقية أعلى على `text`
مدة	رقم	المدة التي ينبغي عرض الخبز المحمص. -1 للنخب الدائم	3000
المحدد	سلسلة \| element_node	Shadowroot	محدد CSS أو عقدة العنصر التي يجب إضافة الخبز المحمص
وجهة	سلسلة URL	عنوان URL الذي يجب أن يتم التنقل فيه إلى المتصفح بنقرة الخبز المحمص
Newwindow	منطقية	تقرر ما إذا كان ينبغي فتح `destination` في نافذة جديدة أم لا	خطأ شنيع
يغلق	منطقية	لإظهار الرمز القريب أم لا	خطأ شنيع
جاذبية	"أعلى" أو "أسفل"	لإظهار الخبز المحمص من أعلى أو أسفل	"قمة"
موضع	"يسار" أو "يمين"	لإظهار الخبز المحمص على اليسار أو اليمين	"يمين"
BackgroundColor	قيمة الخلفية CSS	ليتم إهمالها ، استخدم `style.background` خيار بدلاً من ذلك. يضع لون الخلفية للنخب
الصورة الرمزية	سلسلة URL	الصورة/الأيقونة التي سيتم عرضها قبل النص
اسم الفصل	خيط	القدرة على توفير اسم فئة مخصص لمزيد من التخصيص
stoponfocus	منطقية	لإيقاف المؤقت عندما تحوم فوق الخبز المحمص (فقط إذا تم تعيين المدة)	حقيقي
أتصل مرة أخرى	وظيفة	تم الاحتجاج عندما يتم رفض الخبز المحمص
onclick	وظيفة	تم الاحتجاز عند النقر فوق الخبز المحمص
الإزاحة	هدف	القدرة على إضافة بعض الإزاحة إلى المحور
EscapeMarkup	منطقية	تبديل السلوك الافتراضي للهروب من HTML علامة	حقيقي
أسلوب	هدف	استخدم خصائص نمط HTML DOM لإضافة أي نمط مباشرة إلى الخبز المحمص
arialive	خيط	أعلن عن الخبز المحمص إلى القراء ، راجع https://developer.mozilla.org/en-us/docs/web/accessibility/aria/aria_live_regions للخيارات	"مؤدب"
أولست فيرست	منطقية	اضبط الترتيب الذي يتم فيه تكديس الخبز المحمص في الصفحة	حقيقي

الخصائص المنخفضة: backgroundColor - استخدم style.background خيار بدلاً من ذلك

دعم المتصفحات

أي / الحافة	Firefox	الكروم	سفاري	الأوبرا
IE10 ، IE11 ، الحافة	آخر 10 إصدارات	آخر 10 إصدارات	آخر 10 إصدارات	آخر 10 إصدارات

المساهمين

ASTOKER	Caiomoura1994	rndevfx	1ess	D4RN0K	Danielkaiser80
Skjnldsv	مطاردة	كريسجرهام	واتشيوي	Feixuruins	Gavinhungry
Haydster7	Joaquinwojcik	Juliushaertl	Mort3za	Sandip124	تاداز
T12ung	فيكورفيجو	فياتجاف	بروسو كورم