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 ko'rsatmasangiz, 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.

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>

.hideIlgari, bizning skriptlarimiz tostni to'liq 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="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>

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

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

    toast.show()
  })
}

Shaffof

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

Salom Dunyo! Bu tost xabari.

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>

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

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>

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.

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>

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

Salom Dunyo! Bu tost xabari.

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>

Rang sxemalari

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

Salom Dunyo! Bu tost xabari.

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>

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.

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>

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

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>

Shuningdek, siz tostlarni gorizontal va/yoki vertikal ravishda tekislash uchun flexbox yordam dasturidan zavqlanishingiz mumkin.

Salom Dunyo! Bu tost xabari.

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>

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.

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>

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.

CSS

O'zgaruvchilar

5.2.0 versiyasida qo'shilgan

Bootstrap-ning rivojlanayotgan CSS o'zgaruvchilari yondashuvining bir qismi sifatida endi tostlar .toastreal vaqt rejimini yaxshilash uchun mahalliy CSS o'zgaruvchilardan foydalanadi. CSS o'zgaruvchilari uchun qiymatlar Sass orqali o'rnatiladi, shuning uchun Sass moslashuvi hali ham qo'llab-quvvatlanadi.

  --#{$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 o'zgaruvchilari

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

Foydalanish

JavaScript orqali tostlarni ishga tushiring:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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

data-bs-Variantlar ma'lumotlar atributlari yoki JavaScript orqali uzatilishi mumkinligi sababli , ga variant nomini qo'shishingiz mumkin data-bs-animation="{value}". Variantlarni maʼlumotlar atributlari orqali oʻtkazishda variant nomining registr turini “ camelCase ” dan “ kabob-case ” ga oʻzgartirganingizga ishonch hosil qiling. Masalan, data-bs-custom-class="beautifier"o'rniga foydalaning data-bs-customClass="beautifier".

Bootstrap 5.2.0 dan boshlab barcha komponentlar JSON qatori sifatida oddiy komponent konfiguratsiyasini joylashtirishi mumkin bo'lgan eksperimental zahiradagi ma'lumotlar atributini qo'llab-quvvatlaydi. data-bs-configElement data-bs-config='{"delay":0, "title":123}'va data-bs-title="456"atributlariga ega bo'lsa, yakuniy titleqiymat bo'ladi 456va alohida ma'lumotlar atributlari ga berilgan qiymatlarni bekor qiladi data-bs-config. Bundan tashqari, mavjud ma'lumotlar atributlari kabi JSON qiymatlarini joylashtirishi mumkin data-bs-delay='{"show":0,"hide":150}'.

Ism	Turi	Standart	Tavsif
`animation`	mantiqiy	`true`	Tost uchun CSS pasaytirish o'tishini qo'llang.
`autohide`	mantiqiy	`true`	Kechiktirilgandan keyin tostni avtomatik ravishda yashirish.
`delay`	raqam	`5000`	Tostni yashirishdan oldin millisekundlarda kechikish.

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 .

Usul	Tavsif
`dispose`	Elementning tostini yashiradi. Tostingiz DOMda qoladi, lekin boshqa ko'rsatilmaydi.
`getInstance`	DOM elementi bilan bog'langan tost namunasini olish imkonini beruvchi statik usul. Masalan: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap tost misolini qaytaradi.
`getOrCreateInstance`	Statik usul, bu sizga DOM elementi bilan bog'langan tost namunasini olish yoki ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beradi. `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`Bootstrap tost misolini qaytaradi.
`hide`	Elementning tostini yashiradi. Qo'ng'iroq qiluvchiga tushdi yashirilishidan oldin (ya'ni `hidden.bs.toast`voqea sodir bo'lishidan oldin) qaytadi. Agar siz ushbu usulni qo'lda ishlatsangiz, qo'ng'iroq qilishingiz `autohide`kerak `false`.
`isShown`	Tostning ko'rinish holatiga ko'ra mantiqiy qiymatni qaytaradi.
`show`	Elementning tostini ochib beradi. Qo'ng'iroq qiluvchiga tushdi ko'rsatilishidan oldin (ya'ni `shown.bs.toast`voqea sodir bo'lishidan oldin) qaytadi. Ushbu usulni qo'lda chaqirishingiz kerak, buning o'rniga tushdi ko'rinmaydi.

Voqealar

Tadbir	Tavsif
`hide.bs.toast`	Ushbu hodisa `hide`misol usuli chaqirilganda darhol o'chiriladi.
`hidden.bs.toast`	Ushbu hodisa tost foydalanuvchidan yashirishni tugatgandan so'ng boshlanadi.
`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.

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