Popovers

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

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

• Τα popover βασίζονται στη βιβλιοθήκη τρίτου μέρους Popper για την τοποθέτηση. Πρέπει να συμπεριλάβετε το popper.min.js πριν bootstrap.jsή να χρησιμοποιήσετε ένα bootstrap.bundle.min.jsπου περιέχει Popper.
• Τα popover απαιτούν την προσθήκη popover ως εξάρτηση.
• Τα popover επιλέγονται για λόγους απόδοσης, επομένως πρέπει να τα αρχικοποιήσετε μόνοι σας .
• Το μηδενικό μήκος titleκαι contentοι τιμές δεν θα εμφανίσουν ποτέ popover.
• Καθορίστε container: 'body'για να αποφύγετε την απόδοση προβλημάτων σε πιο σύνθετα στοιχεία (όπως οι ομάδες εισόδου, οι ομάδες κουμπιών κ.λπ.).
• Η ενεργοποίηση popover σε κρυφά στοιχεία δεν θα λειτουργήσει.
• Τα popover για .disabledή disabledτα στοιχεία πρέπει να ενεργοποιούνται σε ένα στοιχείο περιτυλίγματος.
• Όταν ενεργοποιούνται από άγκυρες που τυλίγονται σε πολλές γραμμές, τα popover θα βρίσκονται στο κέντρο μεταξύ του συνολικού πλάτους των αγκυρίων. Χρησιμοποιήστε .text-nowrapτο στο <a>s σας για να αποφύγετε αυτήν τη συμπεριφορά.
• Τα popover πρέπει να είναι κρυφά πριν αφαιρεθούν τα αντίστοιχα στοιχεία τους από το DOM.
• Τα popovers μπορούν να ενεργοποιηθούν χάρη σε ένα στοιχείο μέσα σε ένα σκιερό DOM.

Συνεχίστε να διαβάζετε για να δείτε πώς λειτουργούν τα popovers με μερικά παραδείγματα.

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

Ενεργοποίηση popovers

Όπως αναφέρθηκε παραπάνω, πρέπει να αρχικοποιήσετε τα popover για να μπορούν να χρησιμοποιηθούν. Ένας τρόπος για να αρχικοποιήσετε όλα τα popover σε μια σελίδα θα ήταν να τα επιλέξετε με βάση το data-bs-toggleχαρακτηριστικό τους, όπως:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Ζωντανή επίδειξη

Χρησιμοποιούμε JavaScript παρόμοια με το παραπάνω απόσπασμα για να αποδώσουμε το ακόλουθο ζωντανό popover. Οι τίτλοι ορίζονται μέσω data-bs-titleκαι το περιεχόμενο του σώματος μέσω data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Τέσσερις κατευθύνσεις

Τέσσερις επιλογές είναι διαθέσιμες: πάνω, δεξιά, κάτω και αριστερά. Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL. Ρυθμίστε data-bs-placementγια αλλαγή κατεύθυνσης.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Εθιμοcontainer

Όταν έχετε κάποια στυλ σε ένα γονικό στοιχείο που παρεμβαίνουν σε ένα popover, θα θέλετε να καθορίσετε ένα προσαρμοσμένο container, έτσι ώστε το HTML του popover να εμφανίζεται σε αυτό το στοιχείο. Αυτό είναι σύνηθες σε αποκριτικούς πίνακες, ομάδες εισόδου και παρόμοια.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Μια άλλη περίπτωση όπου θα θέλετε να ορίσετε μια ρητή προσαρμογή containerείναι τα popover μέσα σε ένα διάλογο modal , για να βεβαιωθείτε ότι το ίδιο το popover έχει προσαρτηθεί στο modal. Αυτό είναι ιδιαίτερα σημαντικό για popover που περιέχουν αλληλεπιδραστικά στοιχεία – οι modal διάλογοι θα παγιδεύουν την εστίαση, επομένως, εκτός εάν το popover είναι θυγατρικό στοιχείο του modal, οι χρήστες δεν θα μπορούν να εστιάσουν ή να ενεργοποιήσουν αυτά τα διαδραστικά στοιχεία.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Προσαρμοσμένα popovers

Μπορείτε να προσαρμόσετε την εμφάνιση των popover χρησιμοποιώντας μεταβλητές CSS . Ορίζουμε μια προσαρμοσμένη κλάση με data-bs-custom-class="custom-popover"την οποία καλύπτουμε την προσαρμοσμένη μας εμφάνιση και τη χρησιμοποιούμε για να παρακάμψουμε ορισμένες από τις τοπικές μεταβλητές CSS.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

Παράβλεψη στο επόμενο κλικ

Χρησιμοποιήστε το focusέναυσμα για να απορρίψετε τα popover στο επόμενο κλικ του χρήστη σε ένα διαφορετικό στοιχείο από το στοιχείο εναλλαγής.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Απενεργοποιημένα στοιχεία

Τα στοιχεία με το disabledχαρακτηριστικό δεν είναι διαδραστικά, πράγμα που σημαίνει ότι οι χρήστες δεν μπορούν να τοποθετήσουν το δείκτη του ποντικιού ή να κάνουν κλικ σε αυτά για να ενεργοποιήσουν ένα popover (ή επεξήγηση εργαλείου). Ως λύση, θα θελήσετε να ενεργοποιήσετε το popover από ένα περιτύλιγμα <div>ή <span>ιδανικά κατασκευασμένο με δυνατότητα εστίασης στο πληκτρολόγιο χρησιμοποιώντας tabindex="0".

Για απενεργοποιημένες ενεργοποιήσεις popover, μπορείτε επίσης να προτιμάτε data-bs-trigger="hover focus"το popover να εμφανίζεται ως άμεση οπτική ανατροφοδότηση στους χρήστες σας, καθώς ενδέχεται να μην περιμένουν να κάνουν κλικ σε ένα απενεργοποιημένο στοιχείο.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

Μεταβλητές

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, τα popover χρησιμοποιούν πλέον τοπικές μεταβλητές CSS .popoverγια βελτιωμένη προσαρμογή σε πραγματικό χρόνο. Οι τιμές για τις μεταβλητές CSS ορίζονται μέσω Sass, επομένως η προσαρμογή Sass εξακολουθεί να υποστηρίζεται.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Μεταβλητές Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Χρήση

Ενεργοποίηση popovers μέσω JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Επιλογές

Καθώς οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή 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}'.

Χρήση της λειτουργίας μεpopperConfig

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Μέθοδοι

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Εκδηλώσεις

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})