Тостлар

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

Бу биттә

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

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

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

Тостлар башкару сәбәпләре аркасында сайланган, шуңа күрә сез аларны үзегез башларга тиеш .
Тостлар күрсәтмәсәгез, автоматик рәвештә яшереләчәк autohide: false.

Бу компонентның анимация эффекты prefers-reduced-motionмедиа соравына бәйле. Безнең документларның кыскартылган хәрәкәт бүлеген карагыз .

Мисаллар

Төп

Киңәйтелә торган һәм алдан әйтеп була торган тостларны дәртләндерү өчен, без башны һәм тәнне тәкъдим итәбез. Тост башлыклары кулланалар display: flex, безнең маржа һәм флексбокс ярдәмендә җиңел эчтәлекне тигезләргә мөмкинлек бирәләр.

Тостлар сезгә кирәк булганча сыгылучан һәм бик аз кирәкле билгеләргә ия. Ник дигәндә, без сезнең "тостланган" эчтәлекне үз эченә алу өчен бер элемент таләп итәбез һәм эштән җибәрү төймәсен дәртләндерәбез.

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

html

<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="toast-container position-fixed bottom-0 end-0 p-3">
  <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 кулланабыз:

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

    toast.show()
  })
}

Транслент

Тостлар астындагы әйберләр белән кушылу өчен бераз тонык.

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

html

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

Саклау

Сез тостларны тост контейнерына төреп урнаштыра аласыз, бу вертикаль аралар өстәячәк.

Карагыз? Бу шулай.

Башлар, тостлар автоматик рәвештә тезеләчәк

html

<div class="toast-container position-static">
  <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 ярдәмчесен кулланып.

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

html

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

Альтернатив рәвештә, сез тостларга өстәмә контроль һәм компонентлар өсти аласыз.

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

html

<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гарыдагы мисалга нигезләнеп, сез безнең төс һәм фон ярдәмендә төрле тост төс схемаларын булдыра аласыз . Монда без өстәдек .text-bg-primary, .toastаннары .btn-close-whiteябык төймәгә өстәдек. Чиста кыр өчен без килешү чикләрен бетерәбез .border-0.

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

html

<div class="toast align-items-center text-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.

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

html

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

Күбрәк белдерүләр тудырган системалар өчен, төрү элементын кулланыгыз, алар җиңел генә тезеләләр.

Карагыз? Бу шулай.

Башлар, тостлар автоматик рәвештә тезеләчәк

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

Сез шулай ук тостларны горизонталь һәм / яки вертикаль тигезләү өчен флексбокс ярдәмендә файдалы була аласыз.

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

html

<!-- 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, кулланучыларга тостны кире кагар өчен, сез ябык төймә өстәргә тиеш.

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

html

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

CSS

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, тостлар .toastреаль вакыттагы көйләү өчен җирле CSS үзгәрүләрен кулланалар. CSS үзгәрүчәннәре өчен кыйммәтләр Sass аша куела, шуңа күрә Sass көйләү дә ярдәм итә.

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Сасс үзгәрүләр

$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:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$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 аша башлау:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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="{value}". Вариант исемен мәгълүмат атрибутлары аша үткәндә " camelCase " дан "kebab -case " га үзгәртегез. Мәсәлән, data-bs-custom-class="beautifier"урынына кулланыгыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 мәгълүматларына караганда, барлык компонентлар эксперименталь сакланган мәгълүмат атрибутын хуплый, data-bs-configалар гади компонент конфигурациясен JSON сызыгы итеп урнаштыра ала. Элемент data-bs-config='{"delay":0, "title":123}'һәм data-bs-title="456"атрибутлар булганда, соңгы titleкыйммәт булачак 456һәм аерым мәгълүмат атрибутлары бирелгән кыйммәтләрне юкка чыгарачак data-bs-config. Моннан тыш, булган мәгълүмат атрибутлары JSON кебек кыйммәтләрне урнаштыра ала data-bs-delay='{"show":0,"hide":150}'.

Исем	Тип	Килешү	Тасвирлау
`animation`	буле	`true`	Тостка CSS сүнгән күчүне кулланыгыз.
`autohide`	буле	`true`	Тостны автоматик рәвештә тоткарлагыз.
`delay`	саны	`5000`	Тостны яшергәнче миллисекундта соңга калу.

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

Метод	Тасвирлау
`dispose`	Элемент тостын яшерә. Сезнең тост DOMда калачак, ләкин бүтән күрсәтмәячәк.
`getInstance`	DOM элементы белән бәйләнгән тост инстанциясен алырга мөмкинлек бирүче статик ысул. Мәсәлән: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap тост инстанциясен кайтара.
`getOrCreateInstance`	Статик ысул, ул DOM элементы белән бәйләнгән тост инстанциясен алырга, яисә ул башланмаган очракта яңасын булдырырга мөмкинлек бирә. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap тост инстанциясен кайтара.
`hide`	Элемент тостын яшерә. Тост яшерелгәнче шалтыратучыга кире кайта (ягъни `hidden.bs.toast`вакыйга булганчы). Әгәр дә сез бу ысул белән кул белән шалтыратырга тиеш `autohide`булсагыз `false`.
`isShown`	Тостның күренү халәте буенча буле кайтара.
`show`	Элемент тостын ачып бирә. Тост күрсәтелгәнче шалтыратучыга кире кайта (ягъни `shown.bs.toast`вакыйга булганчы). Сез бу ысул белән кул белән шалтыратырга тиеш, аның урынына тостыгыз күрсәтелмәячәк.

Вакыйгалар

Вакыйга	Тасвирлау
`hide.bs.toast`	`hide`Бу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
`hidden.bs.toast`	Бу вакыйга тост кулланучыдан яшерелгәннән соң җибәрелә.
`show.bs.toast`	`show`Бу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
`shown.bs.toast`	Тост кулланучыга күренгәч, бу вакыйга.

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