Тостлар

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

Бу биттә

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

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

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

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

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

Махсус эчтәлек

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

Сәлам, Дөнья! Бу тост хәбәр.

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

DOM элементы белән бәйләнгән scrollspy инстанциясен алырга мөмкинлек бирүче статик ысул

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

getOrCreateInstance

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

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...
})