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

Шарсан талх

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

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

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

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

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн арга барилын нэг хэсэг болгон toasts одоо .toastсайжруулсан бодит цагийн тохиргоонд локал 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...
})