Тосттор

Тост, жеңил жана оңой ыңгайлаштырылуучу эскертүү билдирүүсү менен келгендериңизге эскертмелерди жөнөтүңүз.

Бул бетте

Тосттор - мобилдик жана иш тактасынын операциялык тутумдары тарабынан популярдуу болгон 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>

Ыңгайлаштырылган мазмун

Субкомпоненттерди алып салуу, аларды утилиталар менен өзгөртүү же өзүңүздүн белгилериңизди кошуу менен тостторуңузду ыңгайлаштырыңыз. Бул жерде биз демейкиди алып салуу, Bootstrap.toast-header Icons'тан ыңгайлаштырылган жашыруу сөлөкөтүн кошуу жана макетти тууралоо үчүн кээ бир 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 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, тосттор эми .toastреалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонот. 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 версиясында, бардык компоненттер JSON сап катары жөнөкөй компонент конфигурациясын камтый турган эксперименталдык сакталган маалымат атрибутун колдойт. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'жана data-bs-title="456"атрибуттары болгондо, акыркы titleмаани болот 456жана өзүнчө маалымат атрибуттары берилген маанилерди жокко чыгарат data-bs-config. Мындан тышкары, учурдагы маалымат атрибуттары сыяктуу JSON маанилерин жайгаштыра алат data-bs-delay='{"show":0,"hide":150}'.

аты	Type	Демейки	Description
`animation`	логикалык	`true`	Тостко CSS өчүп өтүүнү колдонуңуз.
`autohide`	логикалык	`true`	Кечиккенден кийин тостту автоматтык түрдө жашыруу.
`delay`	саны	`5000`	Тостту жашырганга чейин миллисекунд менен кечиктириңиз.

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык API ыкмалары асинхрондуу жана өтүүнү баштайт . Алар чалуучуга өтүү башталаары менен, бирок ал бүтө электе кайтып келишет . Кошумчалай кетсек, өтүүчү компоненттеги ыкма чакырыгы этибарга алынбайт .

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

Метод	Description
`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`окуя болгонго чейин) чалуучуга кайтат. Бул ыкманы кол менен чакырышыңыз керек, анын ордуна тостуңуз көрүнбөйт.

Окуялар

Окуя	Description
`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...
})