Τοστ

Προωθήστε ειδοποιήσεις στους επισκέπτες σας με ένα τοστ, ένα ελαφρύ και εύκολα προσαρμόσιμο μήνυμα ειδοποίησης.

Σε αυτήν την σελίδα

Τα τοστ είναι ελαφριές ειδοποιήσεις που έχουν σχεδιαστεί για να μιμούνται τις ειδοποιήσεις push που έχουν διαδοθεί από λειτουργικά συστήματα για κινητά και επιτραπέζιους υπολογιστές. Είναι κατασκευασμένα με 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τάξη για να αποκρύψουν πλήρως ένα τοστ (με 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="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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 για να ενεργοποιήσουμε τη ζωντανή επίδειξη τοστ:

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

Ημιδιαφανής

Τα τοστ είναι ελαφρώς ημιδιαφανή για να εναρμονιστούν με αυτό που υπάρχει κάτω από αυτά.

Γειά σου Κόσμε! Αυτό είναι ένα μήνυμα πρόποσης.

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

Προσαρμοσμένο περιεχόμενο

Προσαρμόστε τις φρυγανιές σας αφαιρώντας επιμέρους στοιχεία, τροποποιώντας τα με βοηθητικά προγράμματα ή προσθέτοντας τη δική σας σήμανση. Εδώ δημιουργήσαμε ένα απλούστερο τοστ καταργώντας την προεπιλογή .toast-header, προσθέτοντας ένα προσαρμοσμένο εικονίδιο απόκρυψης από τα εικονίδια εκκίνησης και χρησιμοποιώντας ορισμένα βοηθητικά προγράμματα 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.

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:                1px;
$toast-border-color:                rgba($black, .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($black, .05);

Χρήση

Αρχικοποιήστε τα τοστ μέσω JavaScript:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return 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="".

Ονομα	Τύπος	Προκαθορισμένο	Περιγραφή
`animation`	boolean	`true`	Εφαρμόστε μια μετάβαση εξαφάνισης CSS στο τοστ
`autohide`	boolean	`true`	Αυτόματη απόκρυψη του τοστ
`delay`	αριθμός	`5000`	Καθυστέρηση απόκρυψης του τοστ (ms)

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .

προβολή

Αποκαλύπτει το τοστ ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το τοστ (δηλαδή πριν συμβεί το shown.bs.toastσυμβάν). Πρέπει να καλέσετε χειροκίνητα αυτήν τη μέθοδο, αντίθετα, το τοστ σας δεν θα εμφανίζεται.

toast.show()

κρύβω

Κρύβει το τοστ ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του τοστ (δηλαδή πριν συμβεί το hidden.bs.toastσυμβάν). Θα πρέπει να καλέσετε χειροκίνητα αυτήν τη μέθοδο εάν κάνατε autohideσε false.

toast.hide()

διαθέτω

Κρύβει το τοστ ενός στοιχείου. Το τοστ σας θα παραμείνει στο DOM αλλά δεν θα εμφανίζεται πλέον.

toast.dispose()

getInstance

Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία του τοστ που σχετίζεται με ένα στοιχείο DOM

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

getOrCreateInstance

Στατική μέθοδος που σας επιτρέπει να λάβετε το στιγμιότυπο τοστ που σχετίζεται με ένα στοιχείο 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...
})