Tostlar

Tost, engil va oson sozlanishi ogohlantirish xabari bilan tashrif buyuruvchilaringizga bildirishnomalarni yuboring.

Ushbu sahifada

Tostlar - bu mobil va ish stoli operatsion tizimlarida ommalashgan push-bildirishnomalarni taqlid qilish uchun mo'ljallangan engil bildirishnomalar. Ular flexbox bilan qurilgan, shuning uchun ularni tekislash va joylashtirish oson.

Umumiy koʻrinish

Tost plaginidan foydalanganda bilishingiz kerak bo'lgan narsalar:

Tostlar unumdorligi sababli tanlanadi, shuning uchun ularni o'zingiz ishga tushirishingiz kerak .
Agar belgilamasangiz, tostlar avtomatik ravishda yashiriladi autohide: false.

Ushbu komponentning animatsiya effekti prefers-reduced-motionmedia so'roviga bog'liq. Maxsus imkoniyatlar hujjatlarimizning qisqartirilgan harakat bo'limiga qarang .

Misollar

Asosiy

Kengaytiriladigan va bashorat qilinadigan tostlarni rag'batlantirish uchun biz sarlavha va tanani tavsiya qilamiz. Tost sarlavhalari display: flexbizning margin va flexbox yordamchi dasturlarimiz tufayli tarkibni oson tekislash imkonini beradi.

Tostlar kerakli darajada moslashuvchan va juda kam talab qilinadigan belgilarga ega. Hech bo'lmaganda, biz "tost" kontentingizni o'z ichiga olishi uchun bitta elementni talab qilamiz va o'chirish tugmasini qattiq rag'batlantiramiz.

Salom Dunyo! Bu tost xabari.

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

.hideIlgari, bizning skriptlarimiz tostni butunlay yashirish uchun sinfni dinamik ravishda qo'shdi ( display:nonefaqat bilan emas, balki bilan opacity:0). Bu endi kerak emas. Biroq, orqaga qarab muvofiqligi uchun bizning skriptimiz keyingi asosiy versiyaga qadar sinfni almashtirishda davom etadi (garchi bunga amaliy ehtiyoj bo'lmasa ham).

Jonli misol

Sukut bo'yicha yashirilgan tushdi (pastki o'ng burchakda bizning yordamchi dasturlarimiz bilan joylashtirilgan) ko'rsatish uchun quyidagi tugmani bosing.

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>

Biz jonli tushdi demosini ishga tushirish uchun quyidagi JavaScript-dan foydalanamiz:

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

    toast.show()
  })
}

Shaffof

Tostlar biroz shaffof bo'lib, ularning ostidagi narsalar bilan uyg'unlashadi.

Salom Dunyo! Bu tost xabari.

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

Stacking

Siz tostlarni tost idishiga o'rash orqali to'plashingiz mumkin, bu esa vertikal ravishda biroz masofa qo'shadi.

Ko'rdingizmi? Xuddi shunday.

E'tibor bering, tostlar avtomatik ravishda yig'iladi

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

Shaxsiy tarkib

Pastki komponentlarni olib tashlash, ularni yordamchi dasturlar bilan sozlash yoki o'z belgilaringizni qo'shish orqali tostlaringizni moslashtiring. Bu yerda biz standartni olib tashlash, Bootstrap Icons.toast-header - dan maxsus yashirish belgisini qo‘shish va tartibni sozlash uchun ba’zi flexbox yordam dasturlaridan foydalanish orqali oddiyroq tushdi yaratdik.

Salom Dunyo! Bu tost xabari.

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

Shu bilan bir qatorda, tostlarga qo'shimcha boshqaruv elementlari va komponentlarni ham qo'shishingiz mumkin.

Salom Dunyo! Bu tost xabari.

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

Rang sxemalari

Yuqoridagi misolga asoslanib, siz bizning rang va fon yordam dasturlarimiz yordamida turli xil tushdi rang sxemalarini yaratishingiz mumkin. Bu erda biz va ga qo'shdik .bg-primaryva keyin yopish tugmachamizga qo'shdik. Aniq chekka uchun standart chegarani olib tashlaymiz ..text-white.toast.btn-close-white.border-0

Salom Dunyo! Bu tost xabari.

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

Joylashtirish

Tostlarni kerakli CSS bilan joylashtiring. Yuqori o'ng tomon ko'pincha bildirishnomalar uchun ishlatiladi, xuddi yuqori o'rta. Agar siz bir vaqtning o'zida faqat bitta tushdi ko'rsatmoqchi bo'lsangiz, joylashishni aniqlash uslublarini to'g'ridan-to'g'ri ustiga qo'ying .toast.

Salom Dunyo! Bu tost xabari.

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

Ko'proq bildirishnomalarni ishlab chiqaradigan tizimlar uchun ular osongina yig'ilib qolishi uchun o'rash elementidan foydalanishni o'ylab ko'ring.

Ko'rdingizmi? Xuddi shunday.

E'tibor bering, tostlar avtomatik ravishda yig'iladi

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

Tostlarni gorizontal va/yoki vertikal ravishda tekislash uchun flexbox yordam dasturlarini ham yoqtirishingiz mumkin.

Salom Dunyo! Bu tost xabari.

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

Foydalanish imkoniyati

Tostlar tashrif buyuruvchilaringiz yoki foydalanuvchilaringiz uchun kichik uzilishlar bo'lishi uchun mo'ljallangan, shuning uchun ekranni o'qiydiganlarga va shunga o'xshash yordamchi texnologiyalarga ega bo'lganlarga yordam berish uchun siz tostlaringizni aria-livemintaqada o'rashingiz kerak . Jonli hududlardagi o‘zgarishlar (masalan, tost komponentini kiritish/yangilash) foydalanuvchining diqqat markazini siljitmasdan yoki foydalanuvchini boshqa yo‘l bilan to‘xtatmasdan, ekran o‘quvchilari tomonidan avtomatik ravishda e’lon qilinadi. Bunga qo'shimcha aria-atomic="true"ravishda, nima o'zgartirilganligini e'lon qilishdan ko'ra, to'liq tost har doim yagona (atom) birlik sifatida e'lon qilinishini ta'minlash uchun kiriting (agar siz tost tarkibining faqat bir qismini yangilasangiz yoki bir xil tost tarkibini ko'rsatsangiz, muammolarga olib kelishi mumkin) keyinroq vaqt oralig'ida). Agar kerakli ma'lumotlar jarayon uchun muhim bo'lsa, masalan, formadagi xatolar ro'yxati uchun, ogohlantirish komponentidan foydalaning.tost o'rniga.

Esda tutingki, tost yaratilishi yoki yangilanishidan oldin jonli hudud belgilashda mavjud bo'lishi kerak . Agar siz ikkalasini bir vaqtning o'zida dinamik ravishda yaratsangiz va ularni sahifaga kiritsangiz, ular odatda yordamchi texnologiyalar tomonidan e'lon qilinmaydi.

Shuningdek , tarkibga qarab roleva darajani moslashtirishingiz kerak . aria-liveXato kabi muhim xabar bo'lsa, dan foydalaning role="alert" aria-live="assertive", aks holda role="status" aria-live="polite"atributlardan foydalaning.

Siz ko'rsatayotgan kontent o'zgarganligi sababli, foydalanuvchilarga tushdi o'qish uchun etarli vaqt bo'lishi uchun delaykutish vaqtini yangilashni unutmang.

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

dan foydalanganda autohide: false, foydalanuvchilarga tostni rad etishiga ruxsat berish uchun yopish tugmasini qo'shishingiz kerak.

Salom Dunyo! Bu tost xabari.

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

Texnik jihatdan tostingizga diqqatni qaratadigan/harakatlanadigan boshqaruv elementlarini (masalan, qo‘shimcha tugmalar yoki havolalar) qo‘shish mumkin bo‘lsa-da, tostlarni avtomatik yashirish uchun buni qilishdan qochishingiz kerak. Agar siz tostga uzoq vaqt delayajratsangiz ham , klaviatura va yordamchi texnologiya foydalanuvchilari chora ko'rish uchun tostga o'z vaqtida etib borishlari qiyin bo'lishi mumkin (chunki tostlar ko'rsatilganda fokuslanmaydi). Agar sizda qo'shimcha nazorat bo'lishi kerak bo'lsa, tostni ishlatishni tavsiya qilamiz autohide: false.

Sass

O'zgaruvchilar

$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);

Foydalanish

JavaScript orqali tostlarni ishga tushiring:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Triggerlar

Ishdan bo'shatishga quyida ko'rsatilgandek tushdi ichidagidata tugmachadagi atribut yordamida erishish mumkin:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

yoki tost tashqarisidagi tugmani data-bs-targetquyida ko'rsatilgandek ishlating:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Variantlar

Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkin. Maʼlumotlar atributlari uchun opsiya nomini quyidagi data-bs-kabi qoʻshing data-bs-animation="".

Ism	Turi	Standart	Tavsif
`animation`	mantiqiy	`true`	Tost uchun CSS pasaytirish o'tishini qo'llang
`autohide`	mantiqiy	`true`	Tostni avtomatik yashirish
`delay`	raqam	`5000`	Tostni yashirishni kechiktirish (ms)

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .

ko'rsatish

Elementning tostini ochib beradi. Qo'ng'iroq qiluvchiga tushdi ko'rsatilishidan oldin (ya'ni shown.bs.toastvoqea sodir bo'lishidan oldin) qaytadi. Ushbu usulni qo'lda chaqirishingiz kerak, buning o'rniga tushdi ko'rinmaydi.

toast.show()

yashirish

Elementning tostini yashiradi. Qo'ng'iroq qiluvchiga tushdi yashirilishidan oldin (ya'ni hidden.bs.toastvoqea sodir bo'lishidan oldin) qaytadi. Agar siz ushbu usulni qo'lda ishlatsangiz, qo'ng'iroq qilishingiz autohidekerak false.

toast.hide()

tasarruf qilish

Elementning tostini yashiradi. Tostingiz DOMda qoladi, lekin boshqa ko'rsatilmaydi.

toast.dispose()

getInstance

DOM elementi bilan bog'langan tost namunasini olish imkonini beruvchi statik usul

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

getOrCreateInstance

DOM elementi bilan bog'langan tost namunasini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul

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

Voqealar

Tadbir turi	Tavsif
`show.bs.toast`	Ushbu hodisa `show`misol usuli chaqirilganda darhol ishga tushadi.
`shown.bs.toast`	Ushbu hodisa tost foydalanuvchiga ko'rinadigan holga keltirilgach, ishga tushiriladi.
`hide.bs.toast`	Ushbu hodisa `hide`misol usuli chaqirilganda darhol o'chiriladi.
`hidden.bs.toast`	Ushbu hodisa tost foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi.

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})