Шарсан талх

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

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

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

Сайн уу, дэлхий! Энэ бол шарсан талх мессеж юм.

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