الخبز المحمص
دفع الإخطارات للزائرين من خلال نخب ورسالة تنبيه خفيفة الوزن وقابلة للتخصيص بسهولة.
الخبز المحمص عبارة عن إخطارات خفيفة الوزن مصممة لتقليد إخطارات الدفع التي تم تعميمها بواسطة أنظمة تشغيل الأجهزة المحمولة وسطح المكتب. لقد تم تصميمها باستخدام flexbox ، لذا من السهل محاذاتها ووضعها.
ملخص
أشياء يجب معرفتها عند استخدام البرنامج المساعد Toast:
- إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلب
util.js
. - يتم الاشتراك في الخبز المحمص لأسباب تتعلق بالأداء ، لذلك يجب عليك تهيئتها بنفسك .
- يرجى ملاحظة أنك مسؤول عن وضع الخبز المحمص.
- سوف تختبئ الخبز المحمص تلقائيًا إذا لم تحددها
autohide: false
.
يعتمد تأثير الرسوم المتحركة لهذا المكون على prefers-reduced-motion
الاستعلام عن الوسائط. راجع قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
أمثلة
أساسي
لتشجيع الخبز المحمص القابل للتوسيع والمتوقع ، نوصي باستخدام رأس وجسم. تستخدم رؤوس الخبز المحمص display: flex
، مما يتيح سهولة محاذاة المحتوى بفضل أدوات الهامش والأدوات المرنة.
الخبز المحمص مرن بقدر ما تحتاجه ولديه القليل من الترميز المطلوب. كحد أدنى ، نطلب عنصرًا واحدًا لاحتواء المحتوى "المحمص" الخاص بك ونشجع بشدة على زر الرفض.
شفاف
الخبز المحمص نصف شفاف أيضًا ، لذا فهو يمتزج مع كل ما قد يظهر عليه. بالنسبة للمتصفحات التي تدعم backdrop-filter
خاصية CSS ، سنحاول أيضًا طمس العناصر الموجودة تحت نخب.
التراص
عندما يكون لديك العديد من الخبز المحمص ، فإننا نقوم بشكل افتراضي بتكديسها عموديًا بطريقة يمكن قراءتها.
تحديد مستوى
ضع الخبز المحمص باستخدام CSS المخصص حسب حاجتك. غالبًا ما يتم استخدام الجزء العلوي الأيمن للإشعارات ، كما هو الحال في منتصف الجزء العلوي. إذا كنت ستعرض نخبًا واحدًا فقط في كل مرة ، فضع أنماط تحديد المواقع على .toast
.
بالنسبة للأنظمة التي تنشئ المزيد من الإشعارات ، فكر في استخدام عنصر التفاف حتى يمكن تكديسها بسهولة.
يمكنك أيضًا الاستفادة من أدوات flexbox المساعدة لمحاذاة الخبز المحمص أفقيًا و / أو عموديًا.
إمكانية الوصول
يُقصد من الخبز المحمص أن يكون مقاطعات صغيرة للزائرين أو المستخدمين ، لذا لمساعدة أولئك الذين لديهم قارئات الشاشة والتقنيات المساعدة المماثلة ، يجب عليك لف الخبز المحمص في aria-live
منطقة ما . يتم الإعلان تلقائيًا عن التغييرات التي تم إجراؤها على المناطق الحية (مثل حقن / تحديث مكون نخب) بواسطة برامج قراءة الشاشة دون الحاجة إلى تحريك تركيز المستخدم أو مقاطعة المستخدم بطريقة أخرى. بالإضافة إلى ذلك ، قم بتضمين aria-atomic="true"
ضمان أن يتم دائمًا الإعلان عن الخبز المحمص بأكمله كوحدة واحدة (ذرية) ، بدلاً من الإعلان عما تم تغييره (مما قد يؤدي إلى مشاكل إذا قمت فقط بتحديث جزء من محتوى الخبز المحمص ، أو إذا كنت تعرض نفس محتوى الخبز المحمص في نقطة لاحقة في الوقت المناسب). إذا كانت المعلومات المطلوبة مهمة للعملية ، على سبيل المثال لقائمة الأخطاء في نموذج ، فاستخدم مكون التنبيهبدلا من الخبز المحمص.
لاحظ أن المنطقة الحية يجب أن تكون موجودة في الترميز قبل إنشاء الخبز المحمص أو تحديثه. إذا قمت بإنشاء كليهما ديناميكيًا في نفس الوقت وحقنتهما في الصفحة ، فلن يتم الإعلان عنهما بشكل عام بواسطة التقنيات المساعدة.
تحتاج أيضًا إلى تكييف المستوى role
والمستوى aria-live
اعتمادًا على المحتوى. إذا كانت رسالة مهمة مثل خطأ ، فاستخدم السمات role="alert" aria-live="assertive"
أو استخدمها .role="status" aria-live="polite"
نظرًا لأن المحتوى الذي تعرضه يتغير ، تأكد من تحديث delay
المهلة لضمان حصول الأشخاص على وقت كافٍ لقراءة الخبز المحمص.
عند الاستخدام autohide: false
، يجب عليك إضافة زر إغلاق للسماح للمستخدمين برفض الخبز المحمص.
سلوك JavaScript
إستعمال
تهيئة الخبز المحمص عبر JavaScript:
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-
، كما في data-animation=""
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
الرسوم المتحركة | قيمة منطقية | حقيقي | تطبيق انتقال تلاشي CSS إلى الخبز المحمص |
اخفاء تلقائي | قيمة منطقية | حقيقي | إخفاء الخبز المحمص تلقائيًا |
تأخير | رقم | 500 |
تأخير إخفاء الخبز المحمص (مللي ثانية) |
طُرق
الطرق غير المتزامنة والانتقالات
جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .
راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .
$().toast(options)
يرفق معالج التوست بمجموعة عنصر.
.toast('show')
يكشف عن عنصر الخبز المحمص. يعود إلى المتصل قبل أن يتم عرض الخبز المحمص بالفعل (أي قبل shown.bs.toast
وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا ، بدلاً من ذلك لن يظهر الخبز المحمص.
.toast('hide')
يخفي نخب عنصر. يعود إلى المتصل قبل أن يتم إخفاء الخبز المحمص بالفعل (أي قبل hidden.bs.toast
وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا إذا قمت autohide
بذلك false
.
.toast('dispose')
يخفي نخب عنصر. سيبقى خبز التوست الخاص بك على DOM ولكنه لن يظهر بعد الآن.
الأحداث
نوع الحدث | وصف |
---|---|
show.bs.toast | يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
معروض. نخب | يتم تشغيل هذا الحدث عندما يصبح الخبز المحمص مرئيًا للمستخدم. |
اخفاء | يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
نخب مخفي | يتم تشغيل هذا الحدث عند انتهاء إخفاء الخبز المحمص عن المستخدم. |