in English

Шарсан талх

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

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

Амьд

Доорх товчийг дарж өгөгдмөлөөр нуусан шарсан талхыг (баруун доод буланд манай хэрэгслүүдийн хамт байрлуулсан) харуулна уу .hide.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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="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>

Техникийн хувьд шарсан талхандаа анхаарлаа төвлөрүүлэх/үйлдвэрлэх боломжтой хяналтуудыг (нэмэлт товчлуурууд эсвэл холбоосууд гэх мэт) нэмэх боломжтой ч, шарсан талхыг автоматаар нуухын тулд үүнийг хийхээс зайлсхийх хэрэгтэй. Хэдийгээр та шарсан талхыг удаан delayхугацаагаар өгсөн ч гар болон туслах технологийн хэрэглэгчид арга хэмжээ авахын тулд шарсан талханд хүрэхэд хүндрэлтэй байж магадгүй (учир нь шарсан талхыг харуулах үед анхаарлаа төвлөрүүлдэггүй). Хэрэв танд нэмэлт хяналт зайлшгүй шаардлагатай бол бид -тэй шарсан талх хэрэглэхийг зөвлөж байна autohide: false.

JavaScript-ийн үйлдэл

Хэрэглээ

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

$('.toast').toast(option)

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-animation="".

Нэр Төрөл Өгөгдмөл Тодорхойлолт
хөдөлгөөнт дүрс логик үнэн Шарсан талханд CSS бүдгэрүүлэх шилжилтийг хэрэглээрэй
автоматаар нуух логик үнэн Шарсан талхыг автоматаар нуух
саатал тоо 500 Delay hiding the toast (ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

$().toast(options)

Attaches a toast handler to an element collection.

.toast('show')

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

$('#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...
})