Төп эчтәлеккә күчү Документлар навигациясенә күчү
in English

Тостлар

Тост, җиңел һәм җиңел көйләнә торган уяу хәбәр белән килүчеләргә хәбәрләр җибәрегез.

Бу биттә

Тостлар - мобиль һәм өстәл операцион системалары тарафыннан популярлашкан этәргеч хәбәрләрен охшату өчен эшләнгән җиңел хәбәрләр. Алар флексбокс белән төзелгән, шуңа күрә аларны тигезләү һәм урнаштыру җиңел.

Гомуми күзәтү

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

  • Тостлар башкару сәбәпләре аркасында сайланган, шуңа күрә сез аларны үзегез башларга тиеш .
  • Тостлар күрсәтмәсәгез, автоматик рәвештә яшереләчәк 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 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). Бу инде кирәк түгел. Ләкин, артка туры килү өчен, безнең скрипт чираттагы төп версиягә кадәр классны алыштыруны дәвам итәчәк (моның өчен практик ихтыяҗ булмаса да).

Тере мисал

Килешү буенча яшерелгән тостны күрсәтү өчен астагы төймәгә басыгыз.

<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 иконаларыннан.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>

Төс схемалары

Aboveгарыдагы мисалга нигезләнеп, сез безнең төс һәм фон ярдәмендә төрле тост төс схемаларын булдыра аласыз . Монда без өстәдек .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>

Урнаштыру

Тостларны үзегезгә кирәк булганча урнаштырыгыз. Өске уң уң өске урта кебек үк хәбәрләр өчен еш кулланыла. Әгәр сез берьюлы бер тостны күрсәтергә җыенасыз икән, позицияләү стильләрен уң якка куегыз .toast.

Ботстрап 11 минут элек
Сәлам, Дөнья! Бу тост хәбәр. 
<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 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.

Сасс

Variзгәрешләр

$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="".

Исем Тип Килешү Тасвирлау
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

Вакыйгалар

Вакыйга төре Тасвирлау
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...
})