Source

Тостове

Насочени известия към вашите посетители с тост, леко и лесно персонализирано предупредително съобщение.

Тостовете са леки известия, предназначени да имитират насочените известия, които са популяризирани от мобилни и настолни операционни системи. Те са създадени с flexbox, така че са лесни за подравняване и позициониране.

Преглед

Неща, които трябва да знаете, когато използвате приставката за тост:

  • Ако изграждате нашия JavaScript от изходния код, той изискваutil.js .
  • Тостовете се включват от съображения за ефективност, така че трябва да ги инициализирате сами .
  • Моля, обърнете внимание, че вие ​​сте отговорни за позиционирането на тостовете.
  • Тостовете автоматично ще се скрият, ако не посочите autohide: false.

Анимационният ефект на този компонент зависи от prefers-reduced-motionмедийната заявка. Вижте раздела за намалено движение в нашата документация за достъпност .

Примери

Основен

За насърчаване на разтегателни и предвидими тостове препоръчваме заглавие и тяло. Тост заглавките използват display: flex, което позволява лесно подравняване на съдържанието благодарение на нашите помощни програми за margin и flexbox.

Тостовете са толкова гъвкави, колкото ви е необходимо, и имат много малко необходимо маркиране. Ние изискваме най-малко един елемент да съдържа вашето „препечено“ съдържание и силно препоръчваме бутон за отхвърляне.

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

Bootstrap преди 11 мин
Здравей свят! Това е тост съобщение. 
<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, за да подравните тостове хоризонтално и/или вертикално.

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

поведение на JavaScript

Използване

Инициализиране на тостове чрез JavaScript:

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

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-, както в data-animation="".

Име Тип По подразбиране Описание
анимация булево вярно Приложете CSS избледняващ преход към тоста
автоматично скриване булево вярно Автоматично скриване на тоста
забавяне номер 500 Забавяне на скриването на тоста (ms)

Методи

Асинхронни методи и преходи

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

$().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')

събития

Тип събитие Описание
show.bs.toast Това събитие се задейства веднага, когато showсе извика методът на екземпляра.
показано.bs.toast Това събитие се задейства, когато тостът е направен видим за потребителя.
hide.bs.toast Това събитие се задейства незабавно, когато hideметодът на екземпляра е извикан.
hidden.bs.toast Това събитие се задейства, когато тостът приключи да бъде скрит от потребителя. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})