Тостови

Притиснете ги известувањата до вашите посетители со тост, лесна и лесно приспособлива порака за предупредување.

Тостовите се лесни известувања дизајнирани да ги имитираат притисни известувањата кои се популаризирани од мобилните и десктоп оперативните системи. Тие се изградени со flexbox, така што лесно се порамнуваат и поставуваат.

Преглед

Работи што треба да ги знаете кога го користите приклучокот за тост:

Ако го градите нашиот JavaScript од извор, тоа бараutil.js .
Тостовите се избираат од причини за изведба, па мора сами да ги иницијализирате .
Ве молиме имајте предвид дека вие сте одговорни за позиционирање на здравици.
Тостовите автоматски ќе се сокријат ако не наведете autohide: false.

Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Примери

Основни

За да поттикнете растегливи и предвидливи тостови, препорачуваме заглавие и тело. Заглавија на тост користат display: flex, овозможувајќи лесно усогласување на содржината благодарение на нашите алатки за маргина и 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>

Во живо

Кликнете на копчето подолу за да прикажете тост (позициониран со нашите услуги во долниот десен агол) што е стандардно скриен со .hide.

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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="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>

Иако технички е можно да додадете контроли што може да се фокусираат/активираат (како што се дополнителни копчиња или врски) во вашиот тост, треба да избегнувате да го правите ова за автоматско криење на здравици. Дури и ако на тостот му дадете подолг delayвременски рок , на корисниците на тастатурата и на помошната технологија може да им биде тешко да стигнат до тостот навреме за да преземат акција (бидејќи тостовите не добиваат фокус кога се прикажуваат). Ако апсолутно мора да имате дополнителни контроли, препорачуваме да користите тост со autohide: false.

Однесување на JavaScript

Употреба

Иницијализирајте тостови преку JavaScript:

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

Опции

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

Име	Тип	Стандардно	Опис
анимација	булови	вистина	Нанесете CSS fade премин на тост
автоматско криење	булови	вистина	Автоматско сокријте го тостот
одложување	број	`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`ќе се повика методот на пример.
прикажан.бс.тост	Овој настан се активира кога тостот е видлив за корисникот.
скриј.бс.тост	Овој настан се активира веднаш кога `hide`ќе се повика методот на пример.
скриен.бс.тост	Овој настан се активира кога тостот ќе заврши со криење од корисникот.

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