Тосты

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

На гэтай старонцы

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

Агляд

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

Тосты падключаюцца з меркаванняў прадукцыйнасці, таму вы павінны ініцыялізаваць іх самастойна .
Тосты будуць аўтаматычна схаваны, калі вы не ўкажаце 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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Укладванне

Вы можаце скласці тосты, загарнуўшы іх у кантэйнер для тостаў, што вертыкальна дадасць адлегласць.

Бачыце? Проста так.

Памятаеце, тосты будуць складвацца аўтаматычна

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Індывідуальны кантэнт

Наладзьце свае тосты, выдаліўшы падкампаненты, наладзіўшы іх утылітамі або дадаўшы ўласную разметку. Тут мы стварылі больш просты тост, выдаліўшы па змаўчанні .toast-header, дадаўшы карыстальніцкі значок схавання з Bootstrap Icons і выкарыстоўваючы некаторыя ўтыліты flexbox для карэкціроўкі макета.

Прывітанне Сусвет! Гэта паведамленне з тостам.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Акрамя таго, вы таксама можаце дадаць дадатковыя элементы кіравання і кампаненты ў тосты.

Прывітанне Сусвет! Гэта паведамленне з тостам.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Каляровыя схемы

Абапіраючыся на прыведзены вышэй прыклад, вы можаце ствараць розныя каляровыя схемы тостаў з дапамогай нашых утыліт колеру і фону . Тут мы дадалі .bg-primaryі .text-whiteда .toast, а затым дадалі .btn-close-whiteда нашай кнопкі закрыцця. Для выразнасці краю мы выдаляем рамку па змаўчанні з дапамогай .border-0.

Прывітанне Сусвет! Гэта паведамленне з тостам.

<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Размяшчэнне

Размясціце тосты з карыстальніцкім CSS па меры неабходнасці. Верхні правы часта выкарыстоўваецца для апавяшчэнняў, як і верхні сярэдні. Калі вы збіраецеся паказваць толькі адзін тост за раз, змясціце стылі пазіцыянавання прама на .toast.

Прывітанне Сусвет! Гэта паведамленне з тостам.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

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

Бачыце? Проста так.

Памятаеце, тосты будуць складвацца аўтаматычна

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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 w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></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-bs-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-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Нягледзячы на тое, што тэхнічна магчыма дадаць у ваш тост элементы кіравання, якія можна сфакусаваць/выканаць (напрыклад, дадатковыя кнопкі або спасылкі), вам варта пазбягаць гэтага для аўтаматычнага схавання тостаў. Нават калі вы дасце тосту доўгі delayтайм -аўт , карыстальнікам клавіятуры і дапаможных тэхналогій можа быць цяжка дабрацца да тоста своечасова, каб прыняць меры (паколькі тосты не атрымліваюць фокусу, калі яны адлюстроўваюцца). Калі вам абавязкова патрэбны дадатковыя элементы кіравання, мы рэкамендуем выкарыстоўваць тост з autohide: false.

Сас

Пераменныя

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

Выкарыстанне

Ініцыялізаваць тосты праз JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Параметры

Параметры могуць быць перададзены праз атрыбуты дадзеных або JavaScript. Для атрыбутаў дадзеных дадайце назву опцыі да data-bs-, як у data-bs-animation="".

Імя	Тып	Па змаўчанні	Апісанне
`animation`	лагічны	`true`	Прымяніце да тоста знікненне CSS
`autohide`	лагічны	`true`	Аўтаматычна схаваць тост
`delay`	лік	`5000`	Затрымка хавання тоста (мс)

Метады

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

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

паказаць

Выяўляе тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна паказаны (г.зн. да таго , як shown.bs.toastадбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, замест гэтага ваш тост не будзе адлюстроўвацца.

toast.show()

схаваць

Хавае тост элемента. Вяртаецца да абанента да таго, як тост быў фактычна схаваны (г.зн. да таго , як hidden.bs.toastадбудзецца падзея). Вы павінны ўручную выклікаць гэты метад, калі вы зрабілі autohideгэта false.

toast.hide()

распараджацца

Хавае тост элемента. Ваш тост застанецца ў DOM, але больш не будзе паказвацца.

toast.dispose()

getInstance

Статычны метад, які дазваляе вам атрымаць асобнік Scrollspy, звязаны з элементам DOM

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Статычны метад, які дазваляе вам атрымаць асобнік Scrollspy, звязаны з элементам DOM, або стварыць новы, калі ён не быў ініцыялізаваны

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Падзеі

Тып падзеі	Апісанне
`show.bs.toast`	Гэта падзея запускаецца неадкладна пры `show`выкліку метаду асобніка.
`shown.bs.toast`	Гэта падзея запускаецца, калі тост становіцца бачным для карыстальніка.
`hide.bs.toast`	Гэта падзея запускаецца адразу пасля `hide`выкліку метаду асобніка.
`hidden.bs.toast`	Гэта падзея запускаецца, калі тост перастае быць схаваным ад карыстальніка.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})