Тостҳо

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

Дар ин саҳифа

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

Барраси

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

Тостҳо бо сабабҳои иҷро интихоб карда мешаванд, аз ин рӯ шумо бояд онҳоро худатон оғоз кунед .
Агар шумо нишон надиҳед, тостҳо ба таври худкор пинҳон autohide: falseмешаванд.

Таъсири аниматсияи ин ҷузъ аз prefers-reduced-motionдархости медиа вобаста аст. Ба қисмати камшудаи ҳаракати ҳуҷҷатҳои дастрасии мо нигаред .

Мисолхо

Асосӣ

Барои ташвиқи тостҳои васеъшаванда ва пешгӯинашаванда, мо сарлавҳа ва баданро тавсия медиҳем. Сарлавҳаҳои тост -ро истифода мебаранд display: flex, ки ба шарофати хидматҳои маржа ва flexbox мо ҳамоҳангсозии осони мундариҷаро фароҳам меорад.

Тостҳо ба қадри зарурӣ чандир мебошанд ва аломати хеле кам талаб мекунанд. Ҳадди ақал, мо як унсури ягонаро талаб мекунем, ки мундариҷаи "тост"-и шуморо дар бар гирад ва тугмаи радкуниро сахт ташвиқ кунад.

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

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>

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

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

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

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

Ҷойгиркунӣ

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

Шумо инчунин метавонед бо утилитҳои flexbox барои мувофиқ кардани тостҳо ба таври уфуқӣ ва/ё амудӣ лаззат баред.

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

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

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

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши таҳаввулшавандаи CSS-и Bootstrap, тостҳо ҳоло тағирёбандаҳои маҳаллии CSS-ро .toastбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои 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};

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

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