Source

Тосттор

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

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

Обзор

Тост плагинин колдонууда билүү керек нерселер:

  • Эгер сиз биздин JavaScript булактан куруп жатсаңыз, андаutil.js .
  • Тосттор майнаптуу себептерден улам кошулган, андыктан аларды өзүңүз башташыңыз керек .
  • Тостторду жайгаштыруу үчүн сиз жооптуу экениңизди эске алыңыз.
  • Эгер сиз белгилебесеңиз, тосттор автоматтык түрдө жашырылат 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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Тунук

Тосттор да бир аз тунук, ошондуктан алар эмнени көрсөтсө да аралашат. CSS касиетин колдогон браузерлер үчүн backdrop-filter, биз тосттун астындагы элементтерди бүдөмүктөөгө аракет кылабыз.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Стекинг

Бир нече тостуңуз болгондо, биз аларды окула тургандай кылып вертикалдуу тизип коёбуз.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Жайгаштыруу

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

Bootstrap 11 мүнөт мурун
Салам дүйнө! Бул тост билдирүү. 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript жүрүм-туруму

Колдонуу

JavaScript аркылуу тостторду баштаңыз:

$('.toast').toast(option)

Параметрлер

Параметрлер маалымат атрибуттары же JavaScript аркылуу берилиши мүмкүн. Дайындардын атрибуттары үчүн параметрдин атын data-, сыяктуу эле кошуңуз data-animation="".

аты Type Демейки Description
анимация логикалык чын Тостко CSS өчүп өтүүнү колдонуңуз
autohide логикалык чын Тостту автоматтык түрдө жашыруу
кечиктирүү саны 500 Тостту жашырууну кечиктирүү (мс)

Методдор

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

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

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

$().toast(options)

Элементтердин коллекциясына тост иштеткичти тиркейт.

.toast('show')

Элементтин тостун ачып берет. Тост иш жүзүндө көрсөтүлө электе (б.а. shown.bs.toastокуя болгонго чейин) чалуучуга кайтат. Бул ыкманы кол менен чакырышыңыз керек, анын ордуна тостуңуз көрүнбөйт.

$('#element').toast('show')

.toast('hide')

Элементтин тостун жашырат. Тост чындыгында жашырылганга чейин (б.а. hidden.bs.toastокуя болгонго чейин) чалуучуга кайтат. Эгер сиз бул ыкманы кол менен чакырышыңыз autohideкерек false.

$('#element').toast('hide')

.toast('dispose')

Элементтин тостун жашырат. Сиздин тостуңуз DOMда кала берет, бирок мындан ары көрүнбөйт.

$('#element').toast('dispose')

Окуялар

Окуя түрү Description
show.bs.tost Бул окуя showинстанция ыкмасы чакырылганда дароо күйөт.
көрсөтүлгөн.б.тост Бул окуя тост колдонуучуга көрүнгөндөн кийин өчүрүлөт.
жашыруу.б.тост Бул окуя hideинстанция ыкмасы чакырылганда дароо өчүрүлөт.
жашыруун.б. тост Бул окуя тост колдонуучудан жашырылып бүткөндөн кийин өчүрүлөт. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})