Тостҳо

Огоҳиҳоро ба меҳмонони худ бо вудко, паёми ҳушдори сабук ва ба осонӣ танзимшаванда пахш кунед.

Тостҳо огоҳиномаҳои сабук мебошанд, ки барои тақлид кардани огоҳиҳои push, ки аз ҷониби системаҳои оператсионии мобилӣ ва мизи корӣ маъмул шудаанд, тарҳрезӣ шудаанд. Онҳо бо flexbox сохта шудаанд, аз ин рӯ онҳоро ҳамоҳанг кардан ва ҷойгир кардан осон аст.

Барраси

Чизҳоеро, ки ҳангоми истифодаи плагини тост донистан лозим аст:

Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .
Тостҳо бо сабабҳои иҷро интихоб карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
Лутфан қайд кунед, ки шумо барои ҷойгир кардани тостҳо масъул ҳастед.
Агар шумо нишон надиҳед, тостҳо ба таври худкор пинҳон 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 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>

Шаффоф

Тостҳо низ каме шаффофанд, аз ин рӯ онҳо дар болои ҳар чизе, ки пайдо мешаванд, омехта мешаванд. Барои браузерҳое, ки backdrop-filterмоликияти CSS-ро дастгирӣ мекунанд, мо инчунин кӯшиш хоҳем кард, ки унсурҳоро дар зери тост норавшан кунем.

Салом Ҷаҳон! Ин паёми тост аст.

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

Ҷойгиркунӣ

Тостҳоро бо CSS фармоишӣ, ки ба шумо лозим аст, ҷойгир кунед. Қисмати рости боло одатан барои огоҳиномаҳо истифода мешавад, ба монанди мобай��и боло. Агар шумо ҳамеша як вудкоро дар як вақт нишон додан хоҳед, услубҳои ҷойгиркуниро рост ба .toast.

Салом Ҷаҳон! Ин паёми тост аст.

<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 барои мувофиқ кардани тостҳо ба таври уфуқӣ ва/ё амудӣ лаззат баред.

Салом Ҷаҳон! Ин паёми тост аст.

<!-- 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`даъват кардани усули мисол сар мешавад.
нишон дода шудааст.б. тост	Ин чорабинӣ вақте ки вудкои кардааст, ба корбар намоён дод, оташ.
пинҳон.б.таст	Ин ҳодиса фавран ҳангоми `hide`даъват кардани усули инстансия оғоз мешавад.
вудкои пинҳонӣ	Ин ҳодиса пас аз анҷоми вудкои пинҳон шудан аз корбар оғоз мешавад.

$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})