Popovers

Vështrim i përgjithshëm

Gjërat që duhet të dini kur përdorni shtojcën popover:

• Popoverët mbështeten në bibliotekën e palës së tretë Popper për pozicionimin. Ju duhet të përfshini popper.min.js përpara bootstrap.js ose përdorni bootstrap.bundle.min.js/ bootstrap.bundle.jsqë përmban Popper në mënyrë që popover-et të funksionojnë!
• Popoverët kërkojnë shtojcën e këshillës së veglave si një varësi.
• Popover-et janë të zgjedhur për arsye të performancës, kështu që ju duhet t'i inicializoni ato vetë .
• Gjatësia zero titledhe contentvlerat nuk do të tregojnë kurrë një popover.
• Specifikoni container: 'body'për të shmangur paraqitjen e problemeve në komponentë më kompleksë (si grupet tona të hyrjes, grupet e butonave, etj.).
• Aktivizimi i popover-eve në elementë të fshehur nuk do të funksionojë.
• Popovers për .disabledose disabledelemente duhet të aktivizohen në një element mbështjellës.
• Kur aktivizohen nga ankorat që mbështillen nëpër vija të shumta, popover-et do të përqendrohen midis gjerësisë së përgjithshme të ankorave. Përdorni .text-nowrapnë tuaj <a>për të shmangur këtë sjellje.
• Popover-et duhet të fshihen përpara se elementët e tyre përkatës të hiqen nga DOM.
• Popover-et mund të aktivizohen falë një elementi brenda një DOM hije.

Vazhdoni të lexoni për të parë se si funksionojnë popoverët me disa shembuj.

Shembull: Aktivizo popover-et kudo

Një mënyrë për të inicializuar të gjitha popover-et në një faqe do të ishte përzgjedhja e tyre sipas data-bs-toggleatributit të tyre:

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

Shembull: Përdorimi i containeropsionit

Kur keni disa stile në një element prind që ndërhyjnë me një popover, do të dëshironi të specifikoni një porosi në containermënyrë që HTML-ja e popover-it të shfaqet brenda atij elementi.

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

Shembull

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

Katër drejtime

Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar. Udhëzimet pasqyrohen kur përdorni Bootstrap në 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>

Hiqe në klikim tjetër

Përdorni focuskëmbëzën për të hequr popover-et në klikimin e ardhshëm të përdoruesit të një elementi të ndryshëm nga elementi i ndërrimit.

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

Elemente me aftësi të kufizuara

Elementet me disabledatributin nuk janë ndërveprues, që do të thotë se përdoruesit nuk mund të rrinë pezull ose t'i klikojnë për të aktivizuar një popover (ose këshillë veglash). Si një zgjidhje, do të dëshironi të aktivizoni popover-in nga një mbështjellës <div>ose <span>i bërë në mënyrë ideale të fokusuar në tastierë duke përdorur tabindex="0".

Për aktivizuesit e çaktivizuar të popover-it, mund të preferoni gjithashtu data-bs-trigger="hover focus"që popover-i të shfaqet si reagim i menjëhershëm vizual për përdoruesit tuaj pasi ata mund të mos presin të klikojnë në një element të çaktivizuar.

<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

Variablat

$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);

Përdorimi

Aktivizo popover-et përmes JavaScript:

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

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-bs-, si në data-bs-animation="". Sigurohuni që të ndryshoni llojin e rastit të emrit të opsionit nga camelCase në kebab-case kur kaloni opsionet përmes atributeve të të dhënave. Për shembull, në vend që të përdorni data-bs-customClass="beautifier", përdorni data-bs-custom-class="beautifier".

Përdorimi i funksionit mepopperConfig

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

Metodat

shfaqje

Zbulon popoverin e një elementi. Kthehet te thirrësi përpara se të shfaqet në të vërtetë popoveri (dmth. përpara se shown.bs.popoverngjarja të ndodhë). Kjo konsiderohet si një nxitje "manuale" e popoverit. Popoverët, titulli dhe përmbajtja e të cilave janë të dyja me gjatësi zero, nuk shfaqen kurrë.

myPopover.show()

fshehin

Fsheh popoverin e një elementi. Kthehet te thirrësi përpara se popover të jetë fshehur në të vërtetë (dmth. përpara se të hidden.bs.popoverndodhë ngjarja). Kjo konsiderohet si një nxitje "manuale" e popoverit.

myPopover.hide()

ndërroj

Ndryshon popover-in e një elementi. Kthehet te thirrësi përpara se popover-i të jetë shfaqur ose fshehur (dmth. përpara se të ndodhë ngjarja shown.bs.popoverose ). hidden.bs.popoverKjo konsiderohet si një nxitje "manuale" e popoverit.

myPopover.toggle()

disponoj

Fsheh dhe shkatërron popover-in e një elementi (Heq të dhënat e ruajtura në elementin DOM). Popoverët që përdorin delegimin (të cilat krijohen duke përdorur opsionin selector) nuk mund të shkatërrohen individualisht në elementët e aktivizimit pasardhës.

myPopover.dispose()

mundësojnë

I jep popover-it të një elementi aftësinë për t'u shfaqur. Popover-et janë aktivizuar si parazgjedhje.

myPopover.enable()

çaktivizoni

Heq aftësinë për shfaqjen e popover-it të një elementi. Popover-i do të mund të shfaqet vetëm nëse riaktivizohet.

myPopover.disable()

aktivizuar

Ndryshon aftësinë për shfaqjen ose fshehjen e popover-it të një elementi.

myPopover.toggleEnabled()

përditësimi

Përditëson pozicionin e popover-it të një elementi.

myPopover.update()

getInstance

Metoda statike e cila ju lejon të merrni shembullin popover të lidhur me një element DOM

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

getOrCreateInstance

Metoda statike e cila ju lejon të merrni shembullin popover të lidhur me një element DOM, ose të krijoni një të ri në rast se nuk ishte inicializuar

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

Ngjarjet

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