Тостҳо

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

Дар ин саҳифа

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

Барраси

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

Тостҳо бо сабабҳои иҷро интихоб карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
Агар шумо нишон надиҳед, тостҳо ба таври худкор пинҳон 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 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="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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-и зеринро барои оғоз кардани намоиши вудкои зиндаи худ истифода мебарем:

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

    toast.show()
  })
}

Шаффоф

Тостҳо каме шаффофанд, то бо он чизе, ки дар поён аст, омехта шаванд.

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

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

Мундариҷаи фармоишӣ

Тостҳои худро тавассути нест кардани зеркомпонентҳо, танзими онҳо бо утилитаҳо ё илова кардани аломати шахсии худ танзим кунед. Дар ин ҷо мо вудкои соддатареро тавассути нест кардани пешфарз .toast-header, илова кардани тасвири пинҳонии фармоишӣ аз Icons Bootstrap ва истифодаи баъзе утилитаҳои 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>

Схемаи рангҳо

Бар асоси мисоли дар боло овардашуда, шумо метавонед бо ранг ва утилитаҳои пасзаминаи мо схемаҳои гуногуни ранги тост эҷод кунед . Дар ин ҷо мо .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>

Ҷойгиркунӣ

Тостҳоро бо CSS фармоишӣ, ки ба шумо лозим аст, ҷойгир кунед. Қисмати рости боло одатан барои огоҳиномаҳо истифода мешавад, ба монанди мобайни боло. Агар шумо ҳамеша як вудкоро дар як вақт нишон додан хоҳед, услубҳои ҷойгиркуниро рост ба .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 барои мувофиқ кардани тостҳо ба таври уфуқӣ ва/ё амудӣ лаззат баред.

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

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

Сасс

Тағйирёбандаҳо

$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($black, .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($black, .05);

Истифода

Тостҳоро тавассути JavaScript оғоз кунед:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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="".

Ном	Навъи	Пешфарз	Тавсифи
`animation`	булӣ	`true`	Ба вудкои гузариш пажмурда шудани CSS-ро татбиқ кунед
`autohide`	булӣ	`true`	Тостро худкор пинҳон кунед
`delay`	рақам	`5000`	Таъхири пинҳон кардани тост (мс)

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

нишон додан

вудкои элементро ошкор мекунад. Пеш аз намоиш додани тост (яъне пеш аз shown.bs.toastрух додани ҳодиса) ба зангзан бармегардад. Шумо бояд ба ин усул дастӣ занг занед, ба ҷои он вудкои шумо нишон намедиҳад.

toast.show()

пинҳон

Тостҳои элементро пинҳон мекунад. Пеш аз он ки вудкои воқеан пинҳон карда шавад (яъне пеш аз hidden.bs.toastрух додани ҳодиса) ба зангзан бармегардад. Шумо бояд ба ин усул дастӣ занг занед, агар шумо autohideба false.

toast.hide()

ихтиёр кардан

Тостҳои элементро пинҳон мекунад. Тост шумо дар DOM боқӣ мемонад, аммо дигар нишон намедиҳад.

toast.dispose()

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли тостро бо унсури DOM алоқаманд ба даст оред

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

getOrCreateInstance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли вудкои бо унсури DOM алоқамандро ба даст оред ё дар сурати ба кор андохта нашудани он нав эҷод кунед.

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