Popovers

Pregled

Stvari koje treba znati kada koristite popover dodatak:

• Popovers se oslanjaju na biblioteku treće strane Popper za pozicioniranje. Morate uključiti popper.min.js prije bootstrap.js ili koristiti bootstrap.bundle.min.js/ bootstrap.bundle.jskoji sadrži Popper kako bi popoveri radili!
• Popovi zahtijevaju plugin tooltip kao ovisnost.
• Popoveri su opt-in zbog performansi, pa ih morate sami pokrenuti .
• Nulta duljina titlei contentvrijednosti nikada neće prikazati skočni prikaz.
• Navedite container: 'body'kako biste izbjegli probleme s generiranjem u složenijim komponentama (poput naših ulaznih grupa, grupa gumba itd.).
• Pokretanje skočnih prozora na skrivenim elementima neće raditi.
• Skočni prozori za elemente .disabledili disabledmoraju se pokrenuti na elementu omotača.
• Kada se pokreću iz sidrišta koja se prelamaju preko više linija, skočni prozori bit će centrirani između ukupne širine sidrišta. Koristite .text-nowrapna svom <a>s kako biste izbjegli ovakvo ponašanje.
• Skočni prozori moraju biti skriveni prije nego što se njihovi odgovarajući elementi uklone iz DOM-a.
• Popoveri se mogu pokrenuti zahvaljujući elementu unutar DOM-a u sjeni.

Nastavite čitati da vidite kako skočni prozori funkcioniraju s nekim primjerima.

Primjer: Omogućite skočne prozore posvuda

Jedan od načina da inicijalizirate sve skočne prozore na stranici bio bi da ih odaberete prema njihovom data-bs-toggleatributu:

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

Primjer: Korištenje containeropcije

Kada imate neke stilove na nadređenom elementu koji ometaju skočni prozor, trebali biste navesti prilagođeni containertako da se HTML skočnog prozora pojavljuje unutar tog elementa.

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

Primjer

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

Četiri smjera

Dostupne su četiri opcije: gore, desno, dolje i lijevo poravnato. Upute se preslikavaju kada koristite Bootstrap u RTL-u.

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

Odbaci pri sljedećem kliku

Upotrijebite focusokidač za odbacivanje skočnih prozora pri sljedećem korisnikovom kliku na element različit od preklopnog elementa.

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

Onemogućeni elementi

Elementi s disabledatributom nisu interaktivni, što znači da korisnici ne mogu lebdjeti pokazivačem ili kliknuti na njih da bi pokrenuli skočni prozor (ili opis). Kao zaobilazno rješenje, htjet ćete pokrenuti skočni prozor iz omotača <div>ili <span>, idealno napravljenog za fokusiranje na tipkovnici, pomoću tabindex="0".

Za onemogućene okidače skočnog prozora možda biste radije željeli data-bs-trigger="hover focus"da se skočni prozor pojavi kao neposredna vizualna povratna informacija vašim korisnicima jer možda neće očekivati ​​da će kliknuti na onemogućeni element.

<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

Varijable

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

Korištenje

Omogući skočne prozore putem JavaScripta:

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

Mogućnosti

Opcije se mogu proslijediti putem atributa podataka ili JavaScripta. Za atribute podataka dodajte naziv opcije u data-bs-, kao u data-bs-animation="". Obavezno promijenite vrstu slučaja naziva opcije iz camelCase u kebab-case kada prosljeđujete opcije putem atributa podataka. Na primjer, umjesto da koristite data-bs-customClass="beautifier", koristite data-bs-custom-class="beautifier".

Korištenje funkcije sapopperConfig

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

Metode

pokazati

Otkriva popover elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže (tj. prije nego što se shown.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a. Skočni prozori čiji su naslov i sadržaj nulte duljine nikad se ne prikazuju.

myPopover.show()

sakriti

Skriva skočni prozor elementa. Vraća se pozivatelju prije nego što je popover zapravo skriven (tj. prije nego što se hidden.bs.popoverdogađaj dogodi). Ovo se smatra "ručnim" pokretanjem popover-a.

myPopover.hide()

prebaciti

Isključuje skočni prozor elementa. Vraća se pozivatelju prije nego što se popover stvarno prikaže ili sakrije (tj. prije nego što se dogodi događaj shown.bs.popoverili ). hidden.bs.popoverOvo se smatra "ručnim" pokretanjem popover-a.

myPopover.toggle()

raspolagati

Skriva i uništava popover elementa (Uklanja pohranjene podatke na DOM elementu). Popoveri koji koriste delegiranje (koji se stvaraju pomoću opcije selector) ne mogu se pojedinačno uništiti na okidačkim elementima potomcima.

myPopover.dispose()

omogućiti

Daje mogućnost prikazivanja skočnog prozora elementa. Skočni prozori omogućeni su prema zadanim postavkama.

myPopover.enable()

onemogućiti

Uklanja mogućnost prikazivanja skočnog prozora elementa. Popover će se moći prikazati samo ako je ponovno omogućen.

myPopover.disable()

prebaciOmogućeno

Isključuje mogućnost prikazivanja ili sakrivanja skočnog prozora elementa.

myPopover.toggleEnabled()

Ažuriraj

Ažurira položaj skočnog prozora elementa.

myPopover.update()

getInstance

Statička metoda koja vam omogućuje dobivanje skočne instance povezane s DOM elementom

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

getOrCreateInstance

Statička metoda koja vam omogućuje dobivanje skočne instance povezane s DOM elementom ili stvaranje nove u slučaju da nije inicijalizirana

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

Događaji

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