Source

Здравице

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

Здравице су лагана обавештења дизајнирана да опонашају пусх обавештења која су популаризовала мобилни и десктоп оперативни системи. Направљени су са флексбоксом, тако да их је лако поравнати и позиционирати.

Преглед

Ствари које треба знати када користите додатак за тост:

  • Ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .
  • Здравице се могу укључити из разлога перформанси, тако да их морате сами иницијализирати .
  • Имајте на уму да сте ви одговорни за позиционирање здравица.
  • Здравице ће се аутоматски сакрити ако не наведете 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 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ЦСС својство, такође ћемо покушати да замаглимо елементе испод здравице.

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

Постављање

Поставите здравице са прилагођеним ЦСС-ом како вам требају. Горњи десни се често користи за обавештења, као и горњи средњи. Ако ћете икада показати само једну здравицу одједном, ставите стилове позиционирања тачно на .toast.

Боотстрап пре 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>

ЈаваСцрипт понашање

Употреба

Иницијализујте здравице преко ЈаваСцрипт-а:

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

Опције

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

Име Тип Уобичајено Опис
анимација боолеан истинито Примените прелаз ЦСС фаде на здравицу
аутохиде боолеан истинито Аутоматски сакриј здравицу
кашњење број 500 Кашњење сакривања здравице (мс)

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

$().toast(options)

Припаја руковалац тост-а колекцији елемената.

.toast('show')

Открива здравицу елемента. Враћа позиваоцу пре него што је здравица заиста приказана (тј. пре него што се shown.bs.toastдогађај деси). Морате ручно да позовете ову методу, уместо тога ваша здравица се неће приказати.

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

.toast('hide')

Сакрива здравицу елемента. Враћа се позиваоцу пре него што је здравица заиста скривена (тј. пре него што се hidden.bs.toastдогађај деси). Морате ручно да позовете овај метод ако сте autohideнаправили false.

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

.toast('dispose')

Сакрива здравицу елемента. Здравица ће остати у ДОМ-у, али се више неће приказивати.

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

Догађаји

Тип догађаја Опис
схов.бс.тоаст Овај догађај се покреће одмах када showсе позове метод инстанце.
приказано.бс.здравица Овај догађај се покреће када здравица постане видљива кориснику.
хиде.бс.тоаст Овај догађај се покреће одмах када hideсе позове метод инстанце.
хидден.бс.тоаст Овај догађај се покреће када се здравица заврши са скривањем од корисника. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})