Тостҳо

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

Тостҳо огоҳиномаҳои сабук мебошанд, ки барои тақлид кардани огоҳиҳои 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>

Зиндагӣ

Барои нишон додани вудкои (бо барномаҳои мо дар кунҷи рости поён ҷойгиршуда) тугмаи зерро пахш кунед, ки бо нобаёнӣ бо .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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="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>

Гарчанде ки аз ҷиҳати техникӣ имкон дорад, ки дар вудкои худ идораҳои мутамарказ/амалкунанда (ба монанди тугмаҳо ё истинодҳои иловагӣ) илова кунед, шумо бояд аз ин кор барои худкор пинҳон кардани тост худдорӣ кунед. Ҳатто агар шумо ба вудкои тӯлонӣ мӯҳлат диҳед delay, корбарони клавиатура ва технологияи ёрирасон метавонанд барои сари вақт расидан ба вудко барои андешидани чораҳо душвор бошанд (зеро ҳангоми намоиш додани тостҳо фокусро қабул намекунанд). Агар шумо комилан назорати иловагӣ дошта бошед, мо тавсия медиҳем, ки вудкоро бо autohide: false.

Рафтори 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...
})