Popovers

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

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

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

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

Παράδειγμα: Ενεργοποιήστε τα popovers παντού

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

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

Παράδειγμα: Χρησιμοποιώντας την containerεπιλογή

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

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

Παράδειγμα

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

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

Είναι διαθέσιμες τέσσερις επιλογές: επάνω, δεξιά, κάτω και αριστερή στοίχιση. Οι οδηγίες αντικατοπτρίζονται όταν χρησιμοποιείτε το Bootstrap στο RTL.

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

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

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

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

var popover = new bootstrap.Popover(document.querySelector('.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>

Sass

Μεταβλητές

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Χρήση

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

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

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-bs-, όπως στο data-bs-animation="". Φροντίστε να αλλάξετε τον τύπο πεζών-κεφαλαίων του ονόματος της επιλογής από camelCase σε kebab-case όταν μεταβιβάζετε τις επιλογές μέσω των χαρακτηριστικών δεδομένων. Για παράδειγμα, αντί να χρησιμοποιήσετε data-bs-customClass="beautifier", χρησιμοποιήστε data-bs-custom-class="beautifier".

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

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

Μέθοδοι

προβολή

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

myPopover.show()

κρύβω

Κρύβει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του popover (δηλαδή πριν συμβεί το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

myPopover.hide()

μεταβάλλω

Εναλλάσσει το popover ενός στοιχείου. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί πραγματικά το popover (δηλαδή πριν συμβεί το shown.bs.popoverή το hidden.bs.popoverσυμβάν). Αυτό θεωρείται μια «χειροκίνητη» ενεργοποίηση του popover.

myPopover.toggle()

διαθέτω

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

myPopover.dispose()

επιτρέπω

Δίνει στο popover ενός στοιχείου τη δυνατότητα να εμφανίζεται. Τα popover είναι ενεργοποιημένα από προεπιλογή.

myPopover.enable()

καθιστώ ανίκανο

Καταργεί τη δυνατότητα εμφάνισης του popover ενός στοιχείου. Το popover θα μπορεί να εμφανιστεί μόνο εάν ενεργοποιηθεί ξανά.

myPopover.disable()

toggleEnabled

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

myPopover.toggleEnabled()

εκσυγχρονίζω

Ενημερώνει τη θέση του popover ενός στοιχείου.

myPopover.update()

getInstance

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

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

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

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Εκδηλώσεις

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