الخبز المحمص

دفع الإخطارات للزائرين من خلال نخب ورسالة تنبيه خفيفة الوزن وقابلة للتخصيص بسهولة.

على هذه الصفحة

الخبز المحمص عبارة عن إخطارات خفيفة الوزن مصممة لتقليد إخطارات الدفع التي تم تعميمها بواسطة أنظمة تشغيل الأجهزة المحمولة وسطح المكتب. لقد تم تصميمها باستخدام 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الفصل ديناميكيًا لإخفاء الخبز المحمص تمامًا (مع display:none، وليس فقط مع opacity:0). هذا الآن ليس ضروريا بعد الآن. ومع ذلك ، من أجل التوافق مع الإصدارات السابقة ، سيستمر البرنامج النصي الخاص بنا في تبديل الفئة (على الرغم من عدم وجود حاجة عملية لذلك) حتى الإصدار الرئيسي التالي.

مثال حي

انقر فوق الزر أدناه لإظهار الخبز المحمص (الموجود مع أدواتنا المساعدة في الزاوية اليمنى السفلية) الذي تم إخفاؤه افتراضيًا.

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" 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>

نستخدم جافا سكريبت التالي لتشغيل عرض التوست الحي:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

شفاف

الخبز المحمص شفاف قليلاً لتندمج مع ما تحته.

مرحبا بالعالم! هذه رسالة نخب.

لغة البرمجة

<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 position-static">
  <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>

الألوان

بناءً على المثال أعلاه ، يمكنك إنشاء مخططات ألوان محمصة مختلفة باستخدام أدوات الألوان والخلفية الخاصة بنا . لقد أضفنا هنا .text-bg-primaryإلى .toast، ثم أضفنا .btn-close-whiteإلى زر الإغلاق الخاص بنا. للحصول على حافة واضحة ، نقوم بإزالة الحد الافتراضي باستخدام .border-0.

مرحبا بالعالم! هذه رسالة نخب.

لغة البرمجة

<div class="toast align-items-center text-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 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 -->
  <!-- - `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 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.

CSS

المتغيرات

تمت الإضافة في الإصدار 5.2.0

كجزء من نهج متغيرات CSS المتطور في Bootstrap ، تستخدم الأنخاب الآن متغيرات CSS المحلية .toastلتحسين التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass ، لذلك لا يزال تخصيص Sass مدعومًا أيضًا.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

متغيرات ساس

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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($black, .05);

إستعمال

تهيئة الخبز المحمص عبر JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

محفزات

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

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

أو على زر خارج الخبز المحمص باستخدام data-bs-targetكما هو موضح أدناه:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

خيارات

نظرًا لأنه يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript ، يمكنك إلحاق اسم خيار بـ data-bs-، كما في data-bs-animation="{value}". تأكد من تغيير نوع حالة اسم الخيار من " camelCase " إلى " kebab-case " عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال ، استخدم data-bs-custom-class="beautifier"بدلاً من data-bs-customClass="beautifier".

اعتبارًا من Bootstrap 5.2.0 ، تدعم جميع المكونات سمة بيانات محجوزة تجريبيةdata-bs-config يمكن أن تحتوي على تكوين مكون بسيط كسلسلة JSON. عندما يكون للعنصر سمات data-bs-config='{"delay":0, "title":123}'وخصائص ، ستكون القيمة data-bs-title="456"النهائية وستتجاوز سمات البيانات المنفصلة القيم المعطاة . بالإضافة إلى ذلك ، يمكن لسمات البيانات الحالية استيعاب قيم JSON مثل .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

اسم	يكتب	تقصير	وصف
`animation`	قيمة منطقية	`true`	تطبيق انتقال تلاشي CSS إلى الخبز المحمص.
`autohide`	قيمة منطقية	`true`	إخفاء الخبز المحمص تلقائيًا بعد التأخير.
`delay`	رقم	`5000`	تأخير بالمللي ثانية قبل إخفاء الخبز المحمص.

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

طريقة	وصف
`dispose`	يخفي نخب عنصر. سيبقى خبز التوست الخاص بك على DOM ولكنه لن يظهر بعد الآن.
`getInstance`	طريقة ثابتة تتيح لك الحصول على مثيل التوست المرتبط بعنصر DOM. على سبيل المثال: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`إرجاع مثيل Bootstrap toast.
`getOrCreateInstance`	طريقة ثابتة تسمح لك بالحصول على مثيل التوست المرتبط بعنصر DOM ، أو إنشاء مثيل جديد ، في حالة عدم تهيئته. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`إرجاع مثيل Bootstrap toast.
`hide`	يخفي نخب عنصر. يعود إلى المتصل قبل أن يتم إخفاء الخبز المحمص بالفعل (أي قبل `hidden.bs.toast`وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا إذا قمت `autohide`بذلك `false`.
`isShown`	تُرجع قيمة منطقية وفقًا لحالة رؤية الخبز المحمص.
`show`	يكشف عن عنصر الخبز المحمص. يعود إلى المتصل قبل أن يتم عرض الخبز المحمص بالفعل (أي قبل `shown.bs.toast`وقوع الحدث). يجب عليك استدعاء هذه الطريقة يدويًا ، بدلاً من ذلك لن يظهر الخبز المحمص.

الأحداث

حدث	وصف
`hide.bs.toast`	يتم تشغيل هذا الحدث فورًا عند `hide`استدعاء أسلوب المثيل.
`hidden.bs.toast`	يتم تشغيل هذا الحدث عند انتهاء إخفاء الخبز المحمص عن المستخدم.
`show.bs.toast`	يتم تشغيل هذا الحدث فورًا عند `show`استدعاء أسلوب المثيل.
`shown.bs.toast`	يتم تشغيل هذا الحدث عندما يصبح الخبز المحمص مرئيًا للمستخدم.

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})