in English

Тосттар

Тост, жеңіл және оңай реттелетін ескерту хабары арқылы келушілерге хабарландыруларды жіберіңіз.

Тосттар - бұл мобильді және жұмыс үстелі операциялық жүйелері арқылы танымал болған 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>

Тірі

Әдепкі бойынша жасырылған тостты (төменгі оң жақ бұрышта біздің утилиталарымызда орналасқан) көрсету үшін төмендегі түймені басыңыз .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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="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>

Техникалық тұрғыдан тостқа фокусталатын/әрекет ететін басқару элементтерін (мысалы, қосымша түймелер немесе сілтемелер) қосу мүмкін болса да, тосттарды автоматты түрде жасыру үшін мұны істеуден аулақ болу керек. delayТостқа ұзақ күту уақытын берсеңіз де , пернетақта мен көмекші технология пайдаланушылары тостқа әрекет ету үшін уақытында жету қиынға соғуы мүмкін (өйткені тосттар көрсетілген кезде фокусты алмайды). Егер сізде қосымша басқару элементтері болуы керек болса, бар тостты пайдалануды ұсынамыз autohide: false.

JavaScript әрекеті

Қолданылуы

JavaScript арқылы тосттарды инициализациялаңыз:

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

Опциялар

Опцияларды деректер атрибуттары немесе JavaScript арқылы жіберуге болады. Деректер атрибуттары үшін параметр атауын ішінде data-сияқты қосыңыз data-animation="".

Аты Түр Әдепкі Сипаттама
анимация логикалық рас Тостқа CSS өшуге көшуін қолданыңыз
автоматты түрде жасыру логикалық рас Тостты автоматты түрде жасыру
кешіктіру саны 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')

Оқиғалар

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