Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Шарсан талх

Шарсан талх, хөнгөн жинтэй, хялбархан өөрчлөх боломжтой сэрэмжлүүлгийн мессежээр зочлогчиддоо мэдэгдээрэй.

Энэ хуудсан дээр

Шарсан талх нь хөдөлгөөнт болон ширээний үйлдлийн системүүдээр алдаршсан түлхэх мэдэгдлийг дуурайхад зориулагдсан хөнгөн мэдэгдлүүд юм. Тэдгээр нь 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.

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

Тунгалаг

Шарсан талх нь доор байгаа зүйлтэй холилдохын тулд бага зэрэг тунгалаг байдаг.

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

Ачаалагч 11 минутын өмнө
Сайн уу, дэлхий! Энэ бол шарсан талх мессеж юм. 
<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(0, 0, 0, .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(0, 0, 0, .05);

Хэрэглээ

JavaScript-ээр шарсан талхыг эхлүүлэх:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл 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 элементтэй холбоотой scrollspy жишээг авах боломжийг олгодог статик арга

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

getOrCreateInstance

DOM элементтэй холбоотой scrollspy жишээг авах, эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

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