Popovers

Prehľad

Čo by ste mali vedieť pri používaní popover plugin:

• Popovery sa pri polohovaní spoliehajú na knižnicu Popper tretej strany . Aby popover fungovali, musíte pred bootstrap.js vložiť popper.min.js alebo použiť bootstrap.bundle.min.js/ bootstrap.bundle.jsktorý obsahuje Popper!
• Popovery vyžadujú doplnok tooltip ako závislosť.
• Vyskakovacie okná sú aktivované z dôvodov výkonu, takže ich musíte inicializovať sami .
• Nulová dĺžka titlea contenthodnoty nikdy nezobrazia kontextové okno.
• Špecifikujte container: 'body', aby ste sa vyhli problémom s vykresľovaním v zložitejších komponentoch (ako sú naše vstupné skupiny, skupiny tlačidiel atď.).
• Spustenie vyskakovacích okien na skrytých prvkoch nebude fungovať.
• Vyskakovacie okná pre prvky .disabledalebo disabledprvky musia byť spustené na prvku obalu.
• Pri spustení z kotiev, ktoré sa zalomia cez viacero riadkov, budú vyskakovacie okná vycentrované medzi celkovou šírkou kotiev. Použite .text-nowrapna <a>s, aby ste sa vyhli tomuto správaniu.
• Vyskakovacie okná musia byť skryté pred odstránením príslušných prvkov z modelu DOM.
• Popovery môžu byť spustené vďaka prvku vo vnútri tieňového DOM.

Pokračujte v čítaní, aby ste videli, ako fungujú vyskakovacie okná s niekoľkými príkladmi.

Príklad: Povoliť vyskakovacie okná všade

Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, je vybrať ich podľa ich data-bs-toggleatribútu:

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

Príklad: Použitie containermožnosti

Ak máte nejaké štýly v nadradenom prvku, ktoré zasahujú do kontextového okna, budete chcieť zadať vlastný container, aby sa namiesto toho v tomto prvku objavil kód HTML kontextového okna.

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

Príklad

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

Štyri smery

K dispozícii sú štyri možnosti: zarovnané hore, vpravo, dole a vľavo. Pokyny sa zrkadlia pri použití Bootstrapu v 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>

Zavrieť pri ďalšom kliknutí

Pomocou focusspúšťača zatvorte kontextové okná pri ďalšom kliknutí používateľa na iný prvok, než je prvok prepínača.

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

Zakázané prvky

Prvky s disabledatribútom nie sú interaktívne, čo znamená, že používatelia na ne nemôžu umiestniť kurzor myši alebo na ne kliknúť, aby vyvolali kontextové okno (alebo popis). Ako riešenie budete chcieť spustiť vyskakovacie okno z obalu <div>alebo <span>, ideálne tak, aby bolo možné zamerať sa na klávesnicu pomocou tabindex="0".

V prípade vypnutých spúšťačov kontextových okien môžete tiež uprednostniť data-bs-trigger="hover focus", aby sa kontextové okno zobrazovalo vašim používateľom ako okamžitá vizuálna spätná väzba, pretože nemusia očakávať, že kliknú na zakázaný prvok.

<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

Premenné

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

Použitie

Povoliť vyskakovacie okná prostredníctvom JavaScriptu:

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

možnosti

Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-bs-, ako v data-bs-animation="". Pri odovzdávaní možností cez dátové atribúty nezabudnite zmeniť typ prípadu názvu možnosti z camelCase na kebab-case. Napríklad namiesto použitia data-bs-customClass="beautifier"použite data-bs-custom-class="beautifier".

Použitie funkcie spopperConfig

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

Metódy

šou

Odhalí vyskakovací prvok prvku. Vráti sa k volajúcemu skôr, ako sa skutočne zobrazí kontextové okno (tj predtým, ako shown.bs.popoverdôjde k udalosti). Toto sa považuje za „manuálne“ spustenie vyskakovacieho okna. Kontextové okná, ktorých názov aj obsah majú nulovú dĺžku, sa nikdy nezobrazia.

myPopover.show()

skryť

Skryje popover prvku. Vráti sa k volajúcemu skôr, ako sa kontextové okno skutočne skrylo (tj predtým, ako hidden.bs.popovernastane udalosť). Toto sa považuje za „manuálne“ spustenie vyskakovacieho okna.

myPopover.hide()

prepnúť

Prepína kontextové okno prvku. Vráti sa k volajúcemu predtým, ako sa kontextové okno skutočne zobrazí alebo skryje (tj predtým, ako nastane udalosť shown.bs.popoveralebo ). hidden.bs.popoverToto sa považuje za „manuálne“ spustenie vyskakovacieho okna.

myPopover.toggle()

disponovať

Skryje a zničí popover prvku (odstráni uložené údaje v prvku DOM). Vyskakovacie okná, ktoré používajú delegovanie (ktoré sú vytvorené pomocou voľby ) selector, nemožno jednotlivo zničiť na podradených spúšťacích prvkoch.

myPopover.dispose()

povoliť

Umožňuje zobrazenie kontextového okna prvku. Popovers sú predvolene povolené.

myPopover.enable()

zakázať

Odstráni možnosť zobrazenia kontextového okna prvku. Kontextové okno sa bude môcť zobraziť iba vtedy, ak bude znova povolené.

myPopover.disable()

toggleEnabled

Prepína možnosť zobrazenia alebo skrytia kontextového okna prvku.

myPopover.toggleEnabled()

aktualizovať

Aktualizuje pozíciu kontextového okna prvku.

myPopover.update()

getInstance

Statická metóda, ktorá vám umožňuje získať inštanciu popover spojenú s prvkom DOM

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

getOrCreateInstance

Statická metóda, ktorá vám umožňuje získať inštanciu popover priradenú k prvku DOM alebo vytvoriť novú v prípade, že nebola inicializovaná

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

Diania

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