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