رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

نان تست

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

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

بررسی اجمالی

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

  • نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین باید خودتان آنها را مقداردهی اولیه کنید .
  • اگر نان تست را مشخص نکنید به طور خودکار پنهان می شوند 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 Icons و استفاده از برخی ابزارهای فلکس‌باکس برای تنظیم طرح ، یک نان تست ساده‌تر ایجاد کرده‌ایم .

<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.

بوت استرپ 11 دقیقه پیش
سلام دنیا! این یک پیام نان تست است.
<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 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);

استفاده

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

گزینه ها

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

نام تایپ کنید پیش فرض شرح
animation بولی true یک انتقال محو شدن CSS به نان تست اعمال کنید
autohide بولی true مخفی کردن خودکار نان تست
delay عدد 5000 تأخیر در پنهان کردن نان تست (ms)

مواد و روش ها

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

show

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

toast.show()

hide

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

toast.hide()

dispose

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

toast.dispose()

getInstance

Static method which allows you to get the scrollspy instance associated with a DOM element

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Static method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn’t initialised

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Events

Event type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.toast این رویداد زمانی اجرا می شود که نان تست از کاربر مخفی شود.
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})