Тосттар

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

Бұл бетте

Тосттар - бұл мобильді және жұмыс үстелі операциялық жүйелері арқылы танымал болған push хабарландыруларына ұқсауға арналған жеңіл хабарландырулар. Олар flexbox көмегімен жасалған, сондықтан оларды туралау және орналастыру оңай.

Шолу

Тост плагинін пайдалану кезінде білу керек нәрселер:

Тосттар өнімділік себептеріне байланысты таңдалады, сондықтан оларды өзіңіз баптандыруыңыз керек .
Егер сіз көрсетпесеңіз тосттар автоматты түрде жасырылады 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 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="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>

Тікелей тост демонстрациясын іске қосу үшін біз келесі JavaScript қолданамыз:

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

    toast.show()
  })
}

Мөлдір

Тосттар аздап мөлдір болады, олар астындағылармен араласады.

Сәлем Әлем! Бұл тост хабары.

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

Стектеу

Сіз тосттарды тосттар контейнеріне орау арқылы жинай аласыз, ол тігінен біраз қашықтықты қосады.

Көрдіңіз бе? Дәл осылай.

Назар аударыңыз, тосттар автоматты түрде жиналады

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

Арнаулы мазмұн

Қосалқы құрамдастарды жою, оларды утилиталармен реттеу немесе өзіңіздің белгілеуіңізді қосу арқылы тосттарыңызды реттеңіз. Мұнда әдепкі параметрді жою, Bootstrap белгішелерінен.toast-header реттелетін жасыру белгішесін қосу және орналасуды реттеу үшін кейбір flexbox утилиталарын пайдалану арқылы қарапайым тост жасадық.

Сәлем Әлем! Бұл тост хабары.

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

Сондай-ақ тосттарға қосымша басқару элементтері мен құрамдастарды қосуға болады.

Сәлем Әлем! Бұл тост хабары.

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

Түс схемалары

Жоғарыдағы мысалға сүйене отырып, түс және фон утилиталары арқылы түрлі тост түс схемаларын жасауға болады. Мұнда біз .bg-primaryжәне .text-white-ге қостық .toast, содан кейін .btn-close-whiteжабу түймесіне қостық. Қытырлақ жиек үшін әдепкі жиекті алып тастаймыз .border-0.

Сәлем Әлем! Бұл тост хабары.

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

Орналастыру

Таңдамалы CSS көмегімен тосттарды қажетінше орналастырыңыз. Жоғарғы оң жақ жиі хабарландырулар үшін пайдаланылады, сонымен қатар жоғарғы ортасы. Егер сіз бір уақытта тек бір тост көрсеткіңіз келсе, орналасу мәнерлерін дәл үстіне қойыңыз .toast.

Сәлем Әлем! Бұл тост хабары.

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

Көбірек хабарландырулар жасайтын жүйелер үшін олар оңай жиналуы үшін орау элементін пайдалануды қарастырыңыз.

Көрдіңіз бе? Дәл осылай.

Назар аударыңыз, тосттар автоматты түрде жиналады

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

Сондай-ақ тосттарды көлденең және/немесе тігінен туралау үшін flexbox утилиталарымен қызықты бола аласыз.

Сәлем Әлем! Бұл тост хабары.

<!-- 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кезінде пайдаланушыларға тосттан бас тартуға рұқсат беру үшін жабу түймесін қосу керек.

Сәлем Әлем! Бұл тост хабары.

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

Сасс

Айнымалылар

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

Қолданылуы

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

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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="".

Аты	Түр	Әдепкі	Сипаттама
`animation`	логикалық	`true`	Тостқа CSS өшіру көшуін қолданыңыз
`autohide`	логикалық	`true`	Тостты автоматты түрде жасыру
`delay`	саны	`5000`	Тостты жасыруды кешіктіру (мс)

Әдістері

Асинхронды әдістер мен ауысулар

Барлық API әдістері асинхронды және өтуді бастайды . Олар қоңырау шалушыға ауысу басталған бойда, бірақ аяқталмай тұрып қайтады . Сонымен қатар, өтпелі құрамдастағы әдіс шақыруы еленбейді .

Қосымша ақпарат алу үшін біздің JavaScript құжаттамасын қараңыз .

көрсету

Элементтің тосттарын көрсетеді. Қоңырау шалушыға тост нақты көрсетілмей тұрып (яғни shown.bs.toastоқиға болғанға дейін) оралады. Бұл әдісті қолмен шақыру керек, оның орнына тосттар көрсетілмейді.

toast.show()

жасыру

Элементтің тосттарын жасырады. Қоңырау шалушыға тост шынымен жасырылғанға дейін (яғни hidden.bs.toastоқиға болғанға дейін) оралады. Егер сіз бұл әдісті қолдансаңыз, қолмен шақыруыңыз autohideкерек false.

toast.hide()

кәдеге жарату

Элементтің тосттарын жасырады. Сіздің тостыңыз DOM-да қалады, бірақ енді көрсетілмейді.

toast.dispose()

getInstance

DOM элементімен байланысты тост данасын алуға мүмкіндік беретін статикалық әдіс

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

getOrCreateInstance

DOM элементімен байланыстырылған тост данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға мүмкіндік беретін статикалық әдіс

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

Оқиғалар

Оқиға түрі	Сипаттама
`show.bs.toast`	`show`Бұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
`shown.bs.toast`	Бұл оқиға тост пайдаланушыға көрінетін болған кезде іске қосылады.
`hide.bs.toast`	Бұл оқиға даналық `hide`әдісі шақырылған кезде бірден іске қосылады.
`hidden.bs.toast`	Бұл оқиға тост пайдаланушыдан жасыру аяқталған кезде іске қосылады.

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