الخبز المحمص
دفع الإخطارات للزائرين من خلال نخب ورسالة تنبيه خفيفة الوزن وقابلة للتخصيص بسهولة.
الخبز المحمص عبارة عن إخطارات خفيفة الوزن مصممة لتقليد إخطارات الدفع التي تم تعميمها بواسطة أنظمة تشغيل الأجهزة المحمولة وسطح المكتب. لقد تم تصميمها باستخدام flexbox ، لذا من السهل محاذاتها ووضعها.
ملخص
أشياء يجب معرفتها عند استخدام البرنامج المساعد Toast:
- يتم الاشتراك في الخبز المحمص لأسباب تتعلق بالأداء ، لذلك يجب عليك تهيئتها بنفسك .
- سوف تختبئ الخبز المحمص تلقائيًا إذا لم تحددها
autohide: false
.
prefers-reduced-motion
الاستعلام عن الوسائط. راجع
قسم الحركة المخفضة في وثائق إمكانية الوصول الخاصة بنا .
أمثلة
أساسي
لتشجيع الخبز المحمص القابل للتوسيع والمتوقع ، نوصي باستخدام رأس وجسم. تستخدم رؤوس الخبز المحمص display: flex
، مما يتيح سهولة محاذاة المحتوى بفضل أدوات الهامش والأدوات المرنة.
الخبز المحمص مرن بقدر ما تحتاجه ولديه القليل من الترميز المطلوب. كحد أدنى ، نطلب عنصرًا واحدًا لاحتواء المحتوى "المحمص" الخاص بك ونشجع بشدة على زر الرفض.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
يعيش
انقر فوق الزر أدناه لإظهار الخبز المحمص (الموجود مع أدواتنا المساعدة في الزاوية اليمنى السفلية) والذي تم إخفاؤه افتراضيًا باستخدام .hide
.
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
شفاف
الخبز المحمص شفاف قليلاً لتندمج مع ما تحته.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
التراص
يمكنك تكديس الخبز المحمص عن طريق لفه في وعاء نخب ، والذي سيضيف بعض التباعد بشكل عمودي.
<div class="toast-container">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
محتوى مخصص
قم بتخصيص الخبز المحمص الخاص بك عن طريق إزالة المكونات الفرعية ، أو تعديلها باستخدام الأدوات المساعدة ، أو عن طريق إضافة الترميز الخاص بك. لقد أنشأنا هنا نخبًا أبسط عن طريق إزالة الإعداد الافتراضي .toast-header
، وإضافة رمز إخفاء مخصص من أيقونات Bootstrap ، واستخدام بعض أدوات flexbox المساعدة لضبط التخطيط.
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
بدلاً من ذلك ، يمكنك أيضًا إضافة عناصر تحكم ومكونات إضافية إلى الخبز المحمص.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
الألوان
بناءً على المثال أعلاه ، يمكنك إنشاء مخططات ألوان محمصة مختلفة باستخدام أدوات الألوان والخلفية الخاصة بنا . هنا أضفنا .bg-primary
وإلى ، ثم أضفنا .text-white
إلى زر الإغلاق الخاص بنا. للحصول على حافة واضحة ، نقوم بإزالة الحد الافتراضي باستخدام ..toast
.btn-close-white
.border-0
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
تحديد مستوى
ضع الخبز المحمص باستخدام CSS المخصص حسب حاجتك. غالبًا ما يتم استخدام الجزء العلوي الأيمن للإشعارات ، كما هو الحال في منتصف الجزء العلوي. إذا كنت ستعرض نخبًا واحدًا فقط في كل مرة ، فضع أنماط تحديد المواقع على .toast
.
<form>
<div class="mb-3">
<label for="selectToastPlacement">Toast placement</label>
<select class="form-select mt-2" id="selectToastPlacement">
<option value="" selected>Select a position...</option>
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
</div>
بالنسبة للأنظمة التي تنشئ المزيد من الإشعارات ، فكر في استخدام عنصر التفاف حتى يمكن تكديسها بسهولة.
<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
<!-- - `.p-3` to prevent the toasts from sticking to the edge of the container -->
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
</div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
يمكنك أيضًا الاستفادة من أدوات flexbox المساعدة لمحاذاة الخبز المحمص أفقيًا و / أو عموديًا.
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
</div>
إمكانية الوصول
يُقصد من الخبز المحمص أن يكون مقاطعات صغيرة للزائرين أو المستخدمين ، لذا لمساعدة أولئك الذين لديهم قارئات الشاشة والتقنيات المساعدة المماثلة ، يجب عليك لف الخبز المحمص في aria-live
منطقة ما . يتم الإعلان تلقائيًا عن التغييرات التي تم إجراؤها على المناطق الحية (مثل حقن / تحديث مكون نخب) بواسطة برامج قراءة الشاشة دون الحاجة إلى تحريك تركيز المستخدم أو مقاطعة المستخدم بطريقة أخرى. بالإضافة إلى ذلك ، قم بتضمين aria-atomic="true"
التأكد من الإعلان عن الخبز المحمص بالكامل دائمًا كوحدة واحدة (ذرية) ، بدلاً من مجرد الإعلان عما تم تغييره (مما قد يؤدي إلى مشاكل إذا قمت بتحديث جزء فقط من محتوى الخبز المحمص ، أو إذا كنت تعرض نفس محتوى الخبز المحمص في وقت لاحق). إذا كانت المعلومات المطلوبة مهمة للعملية ، على سبيل المثال لقائمة الأخطاء في نموذج ، فاستخدم مكون التنبيهبدلا من الخبز المحمص.
لاحظ أن المنطقة الحية يجب أن تكون موجودة في الترميز قبل إنشاء الخبز المحمص أو تحديثه. إذا قمت بإنشاء كليهما ديناميكيًا في نفس الوقت وحقنتهما في الصفحة ، فلن يتم الإعلان عنهما بشكل عام بواسطة التقنيات المساعدة.
تحتاج أيضًا إلى تكييف المستوى role
والمستوى aria-live
اعتمادًا على المحتوى. إذا كانت رسالة مهمة مثل خطأ ، فاستخدم السمات role="alert" aria-live="assertive"
أو استخدمها .role="status" aria-live="polite"
نظرًا لأن المحتوى الذي تعرضه يتغير ، تأكد من تحديث delay
المهلة بحيث يكون لدى المستخدمين وقت كافٍ لقراءة الخبز المحمص.
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
عند الاستخدام autohide: false
، يجب عليك إضافة زر إغلاق للسماح للمستخدمين برفض الخبز المحمص.
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
في حين أنه من الممكن تقنيًا إضافة عناصر تحكم قابلة للتركيز / قابلة للتنفيذ (مثل الأزرار أو الروابط الإضافية) في الخبز المحمص الخاص بك ، يجب عليك تجنب القيام بذلك لإخفاء الخبز المحمص تلقائيًا. حتى إذا أعطيت الخبز المحمص delay
مهلة طويلة ، فقد يجد مستخدمو لوحة المفاتيح والتكنولوجيا المساعدة صعوبة في الوصول إلى الخبز المحمص في الوقت المناسب لاتخاذ إجراء (نظرًا لأن الخبز المحمص لا يتلقى التركيز عند عرضه). إذا كان يجب أن يكون لديك المزيد من الضوابط ، فإننا نوصي باستخدام الخبز المحمص مع autohide: false
.
ساس
المتغيرات
$toast-max-width: 350px;
$toast-padding-x: .75rem;
$toast-padding-y: .5rem;
$toast-font-size: .875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba(0, 0, 0, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba(0, 0, 0, .05);
إستعمال
تهيئة الخبز المحمص عبر JavaScript:
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-bs-
، كما في data-bs-animation=""
.
اسم | يكتب | تقصير | وصف |
---|---|---|---|
animation |
قيمة منطقية | true |
تطبيق انتقال تلاشي CSS إلى الخبز المحمص |
autohide |
قيمة منطقية | true |
إخفاء الخبز المحمص تلقائيًا |
delay |
رقم | 5000 |
تأخير إخفاء الخبز المحمص (مللي ثانية) |
طُرق
الطرق غير المتزامنة والانتقالات
جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .
راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .
تبين
يكشف عن عنصر الخبز المحمص. يعود إلى المتصل قبل أن يتم عرض الخبز المحمص بالفعل (أي قبل shown.bs.toast
وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا ، بدلاً من ذلك لن يظهر الخبز المحمص.
toast.show()
يخفي
يخفي نخب عنصر. يعود إلى المتصل قبل أن يتم إخفاء الخبز المحمص بالفعل (أي قبل hidden.bs.toast
وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا إذا قمت autohide
بذلك false
.
toast.hide()
تخلص
يخفي نخب عنصر. سيبقى خبز التوست الخاص بك على DOM ولكنه لن يظهر بعد الآن.
toast.dispose()
getInstance
طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
getOrCreateInstance
طريقة ثابتة تتيح لك الحصول على مثيل scrollspy المرتبط بعنصر DOM ، أو إنشاء مثيل جديد في حالة عدم تهيئته
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
الأحداث
نوع الحدث | وصف |
---|---|
show.bs.toast |
يتم تشغيل هذا الحدث فورًا عند show استدعاء أسلوب المثيل. |
shown.bs.toast |
يتم تشغيل هذا الحدث عندما يصبح الخبز المحمص مرئيًا للمستخدم. |
hide.bs.toast |
يتم تشغيل هذا الحدث فورًا عند hide استدعاء أسلوب المثيل. |
hidden.bs.toast |
يتم تشغيل هذا الحدث عند انتهاء إخفاء الخبز المحمص عن المستخدم. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})