Тосттор

Тост, жеңил жана оңой ыңгайлаштырылуучу эскертүү билдирүүсү менен келгендериңизге эскертмелерди жөнөтүңүз.

Бул бетте

Тосттор - мобилдик жана иш тактасынын операциялык тутумдары тарабынан популярдуу болгон push эскертмелерин тууроо үчүн иштелип чыккан жеңил билдирмелер. Алар flexbox менен курулган, ошондуктан аларды тегиздөө жана жайгаштыруу оңой.

Обзор

Тост плагинин колдонууда билүү керек нерселер:

Тосттор майнаптуу себептерден улам кошулган, андыктан аларды өзүңүз башташыңыз керек .
Эгер сиз белгилебесеңиз, тосттор автоматтык түрдө жашырылат 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 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тостту толугу менен жашыруу үчүн классты динамикалык түрдө кошкон ( display:noneжөн гана менен эмес, менен opacity:0). Бул эми кереги жок. Бирок, артка шайкеш келүү үчүн, биздин скрипт кийинки негизги версияга чейин классты которуштурууну улантат (бул үчүн практикалык муктаждык жок болсо да).

Жандуу мисал

Демейки боюнча жашырылган тостту (төмөнкү оң бурчта биздин утилиталарыбыз менен жайгашкан) көрсөтүү үчүн төмөнкү баскычты басыңыз.

Hello, world! This is a toast message.

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

Жандуу тост демосун баштоо үчүн биз төмөнкү JavaScriptти колдонобуз:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Тунук

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

Салам дүйнө! Бул тост билдирүү.

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

Ыңгайлаштырылган мазмун

Субкомпоненттерди алып салуу, аларды утилиталар менен өзгөртүү же өзүңүздүн белгилөөлөрдү кошуу менен тостторуңузду ыңгайлаштырыңыз. Бул жерде биз демейкиди алып салуу, Bootstrap Icons.toast-header программасынан ыңгайлаштырылган жашыруу сөлөкөтүн кошуу жана макетти тууралоо үчүн кээ бир 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.

Sass

Өзгөрмөлөр

$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($black, .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($black, .05);

Колдонуу

JavaScript аркылуу тостторду баштаңыз:

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

Триггерлер

Төмөндө көрсөтүлгөндөй тосттун ичиндегиdata баскычтагы атрибут менен иштен бошотууга болот :

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

же тосттун сыртындагы баскычта data-bs-targetтөмөндө көрсөтүлгөндөй колдонуңуз:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-bs-, сыяктуу эле кошуңуз data-bs-animation="".

аты	Type	Демейки	Description
`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

DOM элементи менен байланышкан тост инстанциясын алууга мүмкүндүк берген статикалык ыкма

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

getOrCreateInstance

DOM элементи менен байланышкан тост инстанциясын алууга же ал инициализацияланбаган учурда жаңысын түзүүгө мүмкүндүк берген статикалык ыкма

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

Окуялар

Окуя түрү	Description
`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...
})