სადღეგრძელოები

გაგზავნეთ შეტყობინებები თქვენს სტუმრებს სადღეგრძელოებით, მსუბუქი და ადვილად კონფიგურირებადი გაფრთხილებით.

ამ გვერდზე

სადღეგრძელოები არის მსუბუქი შეტყობინებები, რომლებიც შექმნილია იმპულსური შეტყობინებების მიბაძვისთვის, რომლებიც პოპულარობით სარგებლობს მობილური და დესკტოპის ოპერაციული სისტემებით. ისინი აგებულია 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). ეს ახლა აღარ არის საჭირო. თუმცა, უკუღმა თავსებადობისთვის, ჩვენი სკრიპტი გააგრძელებს კლასის გადართვას (მიუხედავად იმისა, რომ ამის პრაქტიკული საჭიროება არ არსებობს) შემდეგ მთავარ ვერსიამდე.

ცოცხალი მაგალითი

დააწკაპუნეთ ქვემოთ მოცემულ ღილაკზე, რათა აჩვენოთ სადღეგრძელო (მდებარეობს ჩვენი კომუნალური საშუალებებით ქვედა მარჯვენა კუთხეში), რომელიც დამალულია ნაგულისხმევად.

Hello, world! This is a toast message.

<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.toast-header Icons-დან დამალვის მორგებული ხატის დამატებით და განლაგების კორექტირებისთვის ზოგიერთი 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.

Გამარჯობა მსოფლიო! ეს არის სადღეგრძელო შეტყობინება.

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

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, სადღეგრძელოები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .toastრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს 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 fade გადასვლა სადღეგრძელოზე.
`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...
})