Source

Тостови

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

Тостовите се лесни известувања дизајнирани да ги имитираат притисни известувањата што се популаризирани од мобилните и десктоп оперативните системи. Тие се изградени со 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>

Проѕирен

Тостовите се исто така малку проѕирни, така што се спојуваат над што и да изгледаат. За прелистувачите што ја поддржуваат 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 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 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...
})