Source

Тостлар

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

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

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

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

  • Әгәр дә сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js .
  • Тостлар башкару сәбәпләре аркасында сайланган, шуңа күрә сез аларны үзегез башларга тиеш .
  • Зинһар, тостларны урнаштыру өчен сез җаваплы.
  • Тостлар күрсәтмәсәгез, автоматик рәвештә яшереләчәк 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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Транслент

Тостлар да бераз тонык, шуңа күрә алар нәрсә күренсә дә кушылалар. CSS милеген яклаучы браузерлар өчен backdrop-filterбез тост астындагы элементларны бутарга тырышырбыз.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Саклау

Сезнең берничә тостыгыз булганда, без аларны вертикаль рәвештә укырлык итеп урнаштырабыз.

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

Урнаштыру

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

Ботстрап 11 минут элек
Сәлам, Дөнья! Бу тост хәбәр. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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" style="min-height: 200px;">

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

JavaScript тәртибе

Куллану

Тостларны JavaScript аша башлау:

$('.toast').toast(option)

Вариантлар

Вариантларны мәгълүмат атрибутлары яки JavaScript аша бирергә мөмкин. Мәгълүмат атрибутлары өчен вариант исемен data-өстәгез data-animation="".

Исем Тип Килешү Тасвирлау
анимация буле дөрес Тостка CSS сүнгән күчүне кулланыгыз
автохид буле дөрес Тостны автоматик рәвештә яшерегез
тоткарлау саны 500 Тостны яшерүне тоткарлау (мс)

Методлар

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

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

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

$().toast(options)

Элемент коллекциясенә тост эшкәртүчене бәйли.

.toast('show')

Элемент тостын ачып бирә. Тост күрсәтелгәнче шалтыратучыга кире кайта (ягъни shown.bs.toastвакыйга булганчы). Сез бу ысул белән кул белән шалтыратырга тиеш, аның урынына тостыгыз күрсәтелмәячәк.

$('#element').toast('show')

.toast('hide')

Элемент тостын яшерә. Тост яшерелгәнче шалтыратучыга кире кайта (ягъни hidden.bs.toastвакыйга булганчы). Әгәр дә сез бу ысул белән кул белән шалтыратырга тиеш autohideбулсагыз false.

$('#element').toast('hide')

.toast('dispose')

Элемент тостын яшерә. Сезнең тост DOMда калачак, ләкин бүтән күрсәтмәячәк.

$('#element').toast('dispose')

Вакыйгалар

Вакыйга төре Тасвирлау
show.bs.toast showБу вакыйга инстанция ысулы чакырылганда шунда ук янып тора .
күрсәтелгән.bs.toast Тост кулланучыга күренгәч, бу вакыйга.
hide.bs.toast hideБу вакыйга инстанция ысулы чакырылганда шунда ук эштән чыгарыла .
яшерелгән.bs.toast Бу вакыйга тост кулланучыдан яшерелгәннән соң җибәрелә. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})