Source

Шарсан талх

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

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

Тунгалаг

Шарсан талх нь бас бага зэрэг тунгалаг байдаг тул дээр нь гарч ирж буй бүх зүйл дээр холилдоно. CSS шинж чанарыг дэмждэг хөтчүүдийн backdrop-filterхувьд бид мөн шарсан талхны доорхи элементүүдийг бүдгэрүүлэхийг оролдох болно.

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

Ачаалагч 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="min-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>

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.шарсан талх showИнстанцийн аргыг дуудах үед энэ үйл явдал шууд идэвхждэг .
үзүүлсэн.bs.шарсан талх Шарсан талхыг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг.
нуух.б.шарсан талх hideИнстанцийн аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг .
далд.б.шарсан талх Шарсан талхыг хэрэглэгчээс нууж дууссаны дараа энэ үйл явдал идэвхждэг. 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})