Παράθυρα φόρτωσης στο Bootstrap 5

Popover

Το component Popover είναι παρόμοιο με το tooltip; Είναι ένα αναδυόμενο πλαίσιο που εμφανίζεται όταν ο χρήστης κάνει κλικ σε ένα στοιχείο. Η διαφορά είναι ότι το popover μπορεί να περιέχει περισσότερο περιεχόμενο.

Πώς να δημιουργήσετε ένα Popover

Για να δημιουργήσετε ένα popover, μετακινήστε data-bs-toggle="popover" προστίθεται στην τοποθεσία του στοιχείου.

Χρησιμοποιήστε title Η ιδιότητα καθορίζει τον κείμενο του τίτλου του popover και χρησιμοποιείται data-bs-content Η ιδιότητα καθορίζει τον κείμενο που εμφανίζεται στο σώμα του popover:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Τίτλος Popover" data-bs-content="Κάποιο περιεχόμενο του Popover">Εναλλαγή Popover</button>

Σημείωση:The popover must be initialized with JavaScript to work.

Το παρακάτω κώδικας θα ενεργοποιήσει όλα τα popovers στο έγγραφο:

Παράδειγμα

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
)
</script>

Δοκιμάστε το προσωπικά

Επιλογή τοποθεσίας του αναδυόμενου πλαισίου

By default, the popover will appear on the right side of the element.

Χρησιμοποιήστε data-bs-placement Ρύθμιση της τοποθεσίας του αναδυόμενου πλαισίου�性 για στοιχεία στο επάνω, κάτω, αριστερά ή δεξιά:

Παράδειγμα

<a href="#" title="Επικεφαλίδα" data-bs-toggle="popover" data-bs-placement="top" data-content=" Περιεχόμενο">Άνω</a>
<a href="#" title="Επικεφαλίδα" data-bs-toggle="popover" data-bs-placement="bottom" data-content=" Περιεχόμενο">Κάτω</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Αριστερά</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Δεξιά</a>

Δοκιμάστε το προσωπικά

Σημείωση:If there is not enough space, the placement attribute may not work as expected. For example: If you use the top placement attribute at the top of the page (without reserved space), it will instead be displayed below or to the right of the element (anywhere there is space).

Κλείσιμο παράθυρου ανακάλυψης

By default, the window will close when you click on the element again. However, you can use data-bs-trigger="focus" Ενδεικτικά: Αποσύνδεση του στοιχείου, ρύθμιση αυτής της ιδιότητας μπορεί να κλείσει το παράθυρο ανακάλυψης όταν κάνετε κλικ στο εξωτερικό του στοιχείου:

Παράδειγμα

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Κάντε κλικ σε οποιοδήποτε σημείο του έγγραφου για να κλείσετε αυτό το παράθυρο ανακάλυψης">Κάντε κλικ εδώ</a>

Δοκιμάστε το προσωπικά

Παράθυρο ανακάλυψης

Σημείωση:Αν θέλετε να εμφανιστεί το παράθυρο ανακάλυψης όταν το δάχτυλο του ποντικιού μετακινείται στο στοιχείο, χρησιμοποιήστε το όρισμα "hover" του data-bs-trigger Ενδεικτικά:

Παράδειγμα

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Κείμενο ανακάλυψης">Παρακαλώ σβήστε πάνω από μένα</a>

Δοκιμάστε το προσωπικά