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>

გამჭვირვალე

სადღეგრძელოები ასევე ოდნავ გამჭვირვალეა, ამიტომ ისინი ერწყმის იმას, რაც შეიძლება გამოჩნდეს. ბრაუზერებისთვის, რომლებიც მხარს უჭერენ backdrop-filterCSS თვისებებს, ჩვენ ასევე შევეცდებით სადღეგრძელოს ქვეშ არსებული ელემენტების დაბინდვას.

<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 fade გადასვლა სადღეგრძელოზე
ავტომატური დამალვა ლოგიკური მართალია სადღეგრძელოს ავტომატური დამალვა
დაგვიანებით ნომერი 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გამოიძახება ეგზემპლარის მეთოდი.
ნაჩვენებია.ბს.სადღეგრძელო ეს ღონისძიება გააქტიურებულია, როდესაც სადღეგრძელო მომხმარებლისთვის ხილული გახდება.
დამალვა.ბს.სადღეგრძელო ეს ღონისძიება გააქტიურებულია მაშინვე, როდესაც hideგამოიძახება ინსტანციის მეთოდი.
დამალული.ბს.სადღეგრძელო ეს ღონისძიება გააქტიურებულია, როდესაც სადღეგრძელო მომხმარებლისგან დამალულია.
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})