Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Тосттар

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

Бұл бетте

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

Шолу

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

  • Тосттар өнімділік себептеріне байланысты таңдалады, сондықтан оларды өзіңіз баптандыруыңыз керек .
  • Егер сіз көрсетпесеңіз тосттар автоматты түрде жасырылады autohide: false.
Бұл компоненттің анимациялық әсері prefers-reduced-motionмедиа сұрауына байланысты. Арнайы мүмкіндіктер құжаттамасының қысқартылған қозғалыс бөлімін қараңыз .

Мысалдар

Негізгі

Кеңейтілетін және болжалды тосттарды ынталандыру үшін тақырып пен негізгі мәтінді ұсынамыз. Тост тақырыптары display: flexмаржа мен flexbox утилиталарының арқасында мазмұнды оңай теңестіруге мүмкіндік береді.

Тосттар қажетінше икемді және өте аз талап етілетін белгілерге ие. Кем дегенде, біз сіздің "қызылған" мазмұнды қамтитын бір элементті қажет етеді және жабу түймесін қатты ынталандырады.

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>
Бұрын біздің сценарийлер .hideтостты толығымен жасыру үшін классты динамикалық түрде қосты ( display:noneтек -мен емес, -мен opacity:0). Бұл енді қажет емес. Дегенмен, кері үйлесімділік үшін, біздің сценарий келесі негізгі нұсқаға дейін сыныпты ауыстыра береді (бұл үшін практикалық қажеттілік болмаса да).

Тірі мысал

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

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

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

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

    toast.show()
  })
}

Мөлдір

Тосттар олардың астындағылармен араласу үшін сәл мөлдір.

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>

Стектеу

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

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>

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

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

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>

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

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>

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

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

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>

Орналастыру

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

Bootstrap 11 минут бұрын
Сәлем Әлем! Бұл тост хабары.
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>

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

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>

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

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>

Қол жетімділік

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

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>

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

CSS

Айнымалылар

v5.2.0 нұсқасына қосылды

.toastBootstrap-тың дамып келе жатқан CSS айнымалылары тәсілінің бөлігі ретінде тосттар нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалыларын пайдаланады . CSS айнымалыларының мәндері Sass арқылы орнатылады, сондықтан Sass теңшеуіне әлі де қолдау көрсетіледі.

  --#{$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 айнымалылары

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

Қолданылуы

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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="{value}". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін “ camelCase ” дан “ kebab-case ” түріне өзгертуді ұмытпаңыз. Мысалы, data-bs-custom-class="beautifier"орнына пайдаланыңыз data-bs-customClass="beautifier".

Bootstrap 5.2.0 нұсқасы бойынша барлық компоненттер қарапайым құрамдас конфигурациясын JSON жолы ретінде орналастыра алатын эксперименттік сақталған деректер төлсипатын қолдайды. data-bs-configЭлементте data-bs-config='{"delay":0, "title":123}'және data-bs-title="456"атрибуттары болғанда, соңғы titleмән болады 456және бөлек деректер атрибуттары параметрінде берілген мәндерді қайта анықтайды data-bs-config. Бұған қоса, бар деректер атрибуттары сияқты JSON мәндерін орналастыра алады data-bs-delay='{"show":0,"hide":150}'.

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

Әдістері

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

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

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

Әдіс Сипаттама
dispose Элементтің тосттарын жасырады. Сіздің тостыңыз DOM-да қалады, бірақ енді көрсетілмейді.
getInstance DOM элементімен байланысты тост данасын алуға мүмкіндік беретін статикалық әдіс.
Мысалы: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)Bootstrap тост данасын қайтарады.
getOrCreateInstance DOM элементімен байланысты тост данасын алуға немесе инициализацияланбаған жағдайда жаңасын жасауға мүмкіндік беретін статикалық әдіс.
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)Bootstrap тост данасын қайтарады.
hide Элементтің тосттарын жасырады. Қоңырау шалушыға тост шынымен жасырылғанға дейін (яғни hidden.bs.toastоқиға болғанға дейін) оралады. Егер сіз бұл әдісті қолдансаңыз, қолмен шақыруыңыз autohideкерек false.
isShown Тосттың көріну күйіне сәйкес логикалық мәнді қайтарады.
show Элементтің тосттарын көрсетеді. Қоңырау шалушыға тост нақты көрсетілмей тұрып (яғни shown.bs.toastоқиға болғанға дейін) оралады. Бұл әдісті қолмен шақыру керек, оның орнына тосттар көрсетілмейді.

Оқиғалар

Оқиға Сипаттама
hide.bs.toast Бұл оқиға даналық hideәдісі шақырылған кезде бірден іске қосылады.
hidden.bs.toast Бұл оқиға тост пайдаланушыдан жасыру аяқталған кезде іске қосылады.
show.bs.toast showБұл оқиға даналық әдісі шақырылған кезде бірден іске қосылады.
shown.bs.toast Бұл оқиға тост пайдаланушыға көрінетін болған кезде іске қосылады. 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})