نان تست

با یک نان تست، یک پیام هشدار سبک وزن و به راحتی قابل تنظیم، اعلان‌ها را به بازدیدکنندگان خود ارسال کنید.

نان تست ها اعلان های سبک وزنی هستند که برای تقلید از اعلان های فشاری که توسط سیستم عامل های موبایل و دسکتاپ رایج شده اند طراحی شده اند. آنها با فلکس باکس ساخته شده اند، بنابراین به راحتی قابل تراز و قرار دادن هستند.

بررسی اجمالی

نکاتی که هنگام استفاده از پلاگین نان تست باید بدانید:

• اگر جاوا اسکریپت ما را از منبع می‌سازید، به آن نیاز داردutil.js .
• نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
• اگر نان تست را مشخص نکنید به طور خودکار پنهان می شوند autohide: false.

مثال ها

پایه ای

برای تشویق نان تست های قابل توسعه و قابل پیش بینی، ما یک هدر و بدنه را توصیه می کنیم. از سرصفحه‌های نان تست استفاده display: flexمی‌شود که به لطف ابزارهای حاشیه و فلکس‌باکس ما، امکان تراز آسان محتوا را فراهم می‌کند.

نان تست ها به همان اندازه که شما نیاز دارید انعطاف پذیر هستند و نشانه گذاری مورد نیاز بسیار کمی دارند. حداقل، ما به یک عنصر نیاز داریم که حاوی محتوای «برشته‌شده» شما باشد و قویاً دکمه رد کردن را تشویق می‌کنیم.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

نیمه شفاف

نان تست ها نیز کمی شفاف هستند، بنابراین روی هر چیزی که ممکن است ظاهر شوند مخلوط می شوند. برای مرورگرهایی که از backdrop-filterویژگی CSS پشتیبانی می کنند، ما همچنین سعی خواهیم کرد عناصر زیر یک نان تست را محو کنیم.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

پشتهسازی

وقتی چندین نان تست دارید، به طور پیش‌فرض آن‌ها را به‌صورت عمودی به‌صورت خوانا روی هم قرار می‌دهیم.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

تعیین سطح

در صورت نیاز، نان تست را با CSS سفارشی قرار دهید. بالا سمت راست اغلب برای اعلان ها استفاده می شود، همانطور که در وسط بالا نیز استفاده می شود. اگر می‌خواهید هر بار فقط یک نان تست را نشان دهید، سبک‌های موقعیت‌یابی را درست روی آن قرار دهید .toast.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

برای سیستم‌هایی که اعلان‌های بیشتری تولید می‌کنند، از یک عنصر بسته‌بندی استفاده کنید تا بتوانند به راحتی روی هم قرار بگیرند.

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

همچنین می توانید با ابزارهای فلکس باکس برای تراز کردن نان تست ها به صورت افقی و/یا عمودی جذاب باشید.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

رفتار جاوا اسکریپت

استفاده

تست های اولیه را از طریق جاوا اسکریپت آغاز کنید:

$('.toast').toast(option)

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-animation="".

مواد و روش ها

$().toast(options)

یک دسته نان تست را به مجموعه عناصر متصل می کند.

.toast('show')

نان تست یک عنصر را آشکار می کند. قبل از اینکه نان تست واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . shown.bs.toastشما باید این روش را به صورت دستی فراخوانی کنید، در عوض نان تست شما نشان داده نمی شود.

$('#element').toast('show')

.toast('hide')

نان تست یک عنصر را پنهان می کند. قبل از اینکه نان تست واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد . hidden.bs.toastدر صورتی که autohideبه false.

$('#element').toast('hide')

.toast('dispose')

نان تست یک عنصر را پنهان می کند. نان تست شما در DOM باقی می ماند اما دیگر نشان داده نمی شود.

$('#element').toast('dispose')

مناسبت ها

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})