in English

Τοστ

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

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

Ζω

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

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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 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.

Bootstrap πριν από 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="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>

Ενώ τεχνικά είναι δυνατό να προσθέσετε στοιχεία ελέγχου με δυνατότητα εστίασης/ενεργοποίησης (όπως πρόσθετα κουμπιά ή συνδέσμους) στο τοστ σας, θα πρέπει να αποφύγετε να το κάνετε αυτό για την αυτόματη απόκρυψη των τοστ. Ακόμα κι αν δώσετε στο τοστ μεγάλο delayχρονικό όριο , οι χρήστες του πληκτρολογίου και της υποστηρικτικής τεχνολογίας μπορεί να δυσκολευτούν να φτάσουν έγκαιρα στο τοστ για να λάβουν μέτρα (καθώς τα τοστ δεν εστιάζονται όταν εμφανίζονται). Εάν πρέπει οπωσδήποτε να έχετε περαιτέρω ελέγχους, συνιστούμε να χρησιμοποιήσετε ένα τοστ με autohide: false.

Συμπεριφορά JavaScript

Χρήση

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

$('.toast').toast(option)

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-animation="".

Ονομα Τύπος Προκαθορισμένο Περιγραφή
κινουμένων σχεδίων boolean αληθής Εφαρμόστε μια μετάβαση εξαφάνισης CSS στο τοστ
αυτόματη απόκρυψη boolean αληθής Αυτόματη απόκρυψη του τοστ
καθυστέρηση αριθμός 500 Καθυστέρηση απόκρυψης του τοστ (ms)

Μέθοδοι

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

Όλες οι μέθοδοι 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...
})