Τοστ

Τα τοστ είναι ελαφριές ειδοποιήσεις που έχουν σχεδιαστεί για να μιμούνται τις ειδοποιήσεις push που έχουν διαδοθεί από λειτουργικά συστήματα για κινητά και επιτραπέζιους υπολογιστές. Είναι κατασκευασμένα με flexbox, ώστε να ευθυγραμμίζονται και να τοποθετούνται εύκολα.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Πράγματα που πρέπει να γνωρίζετε όταν χρησιμοποιείτε το πρόσθετο τοστ:

• Τα τοστ επιλέγονται για λόγους απόδοσης, επομένως πρέπει να τα αρχικοποιήσετε μόνοι σας .
• Οι φρυγανιές θα κρύβονται αυτόματα εάν δεν το καθορίσετε autohide: false.

Παραδείγματα

Βασικός

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

Ζωντανό παράδειγμα

Κάντε κλικ στο κουμπί παρακάτω για να εμφανίσετε ένα τοστ (τοποθετημένο με τα βοηθητικά προγράμματα μας στην κάτω δεξιά γωνία) που έχει κρυφτεί από προεπιλογή.

<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()
  })
}

Ημιδιαφανής

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

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

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

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

Σχέδια χρωμάτων

Με βάση το παραπάνω παράδειγμα, μπορείτε να δημιουργήσετε διαφορετικούς συνδυασμούς χρωμάτων τοστ με τα βοηθητικά προγράμματα χρώματος και φόντου . Εδώ προσθέσαμε .text-bg-primaryστο .toast, και μετά προσθέσαμε .btn-close-whiteστο κουμπί κλεισίματος. Για καθαρό άκρο, αφαιρούμε το προεπιλεγμένο περίγραμμα με .border-0.

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

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

Για συστήματα που δημιουργούν περισσότερες ειδοποιήσεις, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε ένα στοιχείο αναδίπλωσης ώστε να μπορούν να στοιβάζονται εύκολα.

<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 για να ευθυγραμμίσετε τα τοστ οριζόντια ή/και κάθετα.

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

CSS

Μεταβλητές

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα τοστ χρησιμοποιούν πλέον τοπικές μεταβλητές 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}'.

Μέθοδοι

Εκδηλώσεις

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})