Source

Тосты

Націскныя апавяшчэнні для вашых наведвальнікаў з тостам, лёгкім і лёгка наладжвальным папярэджаннем.

Тосты - гэта лёгкія апавяшчэнні, створаныя для імітацыі push-апавяшчэнняў, якія папулярызавалі мабільныя і настольныя аперацыйныя сістэмы. Яны створаны з дапамогай flexbox, таму іх лёгка выраўнаваць і размясціць.

Агляд

Што трэба ведаць пры выкарыстанні плагіна toast:

  • Калі вы ствараеце наш JavaScript з зыходнага кода, патрабуеццаutil.js .
  • Тосты падключаюцца з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
  • Звярніце ўвагу, што вы адказваеце за размяшчэнне тостаў.
  • Тосты будуць аўтаматычна схаваны, калі вы не ўкажаце autohide: false.

Анімацыйны эфект гэтага кампанента залежыць ад prefers-reduced-motionмедыя-запыту. Глядзіце раздзел аб паменшаным руху нашай дакументацыі па спецыяльных магчымасцях .

Прыклады

Базавы

Каб стымуляваць пашыраемыя і прадказальныя тосты, мы рэкамендуем загаловак і тэкст. У загалоўках Toast выкарыстоўваецца 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.

Бутстрап 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 Затрымка хавання тоста (мс)

Метады

Асінхронныя метады і пераходы

Усе метады 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.тост Гэта падзея запускаецца, калі тост становіцца бачным для карыстальніка.
hide.bs.toast Гэта падзея запускаецца адразу пасля hideвыкліку метаду асобніка.
hidden.bs.toast Гэта падзея запускаецца, калі тост перастае быць схаваным ад карыстальніка. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})