გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

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

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

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

<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 hide" 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>

გამჭვირვალე

სადღეგრძელოები ოდნავ გამჭვირვალეა, რათა შეერწყას მათ ქვემოთ არსებულს.

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

ჩამტვირთავი 11 წუთის წინ
Გამარჯობა მსოფლიო! ეს არის სადღეგრძელო შეტყობინება.
<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(0, 0, 0, .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(0, 0, 0, .05);

გამოყენება

სადღეგრძელოების ინიციალიზაცია JavaScript-ის საშუალებით:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-bs-, როგორც data-bs-animation="".

სახელი ტიპი ნაგულისხმევი აღწერა
animation ლოგიკური true გამოიყენეთ CSS fade გადასვლა სადღეგრძელოზე
autohide ლოგიკური true სადღეგრძელოს ავტომატური დამალვა
delay ნომერი 5000 სადღეგრძელოს დამალვის გადადება (მმ)

მეთოდები

ასინქრონული მეთოდები და გადასვლები

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

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

შოუ

ავლენს ელემენტის სადღეგრძელოს. უბრუნდება აბონენტს სადღეგრძელოს რეალურად ჩვენებამდე (ანუ shown.bs.toastმოვლენის დაწყებამდე). თქვენ ხელით უნდა გამოძახოთ ეს მეთოდი, სამაგიეროდ თქვენი სადღეგრძელო არ გამოჩნდება.

toast.show()

დამალვა

მალავს ელემენტის სადღეგრძელოს. უბრუნდება აბონენტს, სანამ სადღეგრძელო რეალურად დამალული იქნება (ანუ hidden.bs.toastმოვლენის დაწყებამდე). თქვენ ხელით უნდა დარეკოთ ეს მეთოდი, თუ თქვენ autohideგააკეთეთ false.

toast.hide()

განკარგავს

მალავს ელემენტის სადღეგრძელოს. თქვენი სადღეგრძელო დარჩება DOM-ზე, მაგრამ აღარ გამოჩნდება.

toast.dispose()

getInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ scrollspy მაგალითი, რომელიც დაკავშირებულია DOM ელემენტთან

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ scrollspy ინსტანცია ასოცირებული 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...
})