Popovers

Prehľad

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

• Popovery sa pri umiestňovaní spoliehajú na knižnicu Popper tretej strany . Popper.min.js musíte zahrnúť pred bootstrap.js, alebo použiť ten bootstrap.bundle.min.js, ktorý obsahuje Popper.
• Popovery vyžadujú popover plugin 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 niektorými príkladmi.

Príklady

Povoliť vyskakovacie okná

Ako už bolo spomenuté vyššie, vyskakovacie okná musíte inicializovať predtým, ako ich budete môcť použiť. Jedným zo spôsobov, ako inicializovať všetky kontextové okná na stránke, by bolo vybrať ich podľa ich data-bs-toggleatribútu, napríklad:

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

Živá ukážka

Na vykreslenie nasledujúceho aktívneho kontextového okna používame JavaScript podobný úryvku vyššie. Titulky sa nastavujú cez data-bs-titlea obsah tela sa nastavuje cez 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>

Štyri smery

K dispozícii sú štyri možnosti: hore, vpravo, dole a vľavo. Pokyny sa zrkadlia pri použití Bootstrapu v RTL. Nastavte data-bs-placementna zmenu smeru.

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

Vlastnécontainer

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. To je bežné v responzívnych tabuľkách, skupinách vstupov a podobne.

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

Ďalšou situáciou, v ktorej budete chcieť nastaviť explicitné prispôsobenie container, sú kontextové okná vo vnútri modálneho dialógového okna , aby ste sa uistili, že samotné kontextové okno je pripojené k modálnemu zobrazeniu. Toto je obzvlášť dôležité pre kontextové okná, ktoré obsahujú interaktívne prvky – modálne dialógy zachytia zameranie, takže pokiaľ popover nie je podriadeným prvkom modálneho okna, používatelia nebudú môcť tieto interaktívne prvky zamerať ani aktivovať.

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

Vlastné vyskakovacie okná

Vzhľad vyskakovacích okien môžete prispôsobiť pomocou premenných CSS . Nastavili sme vlastnú triedu s data-bs-custom-class="custom-popover"na rozsah nášho vlastného vzhľadu a použili sme ju na prepísanie niektorých miestnych premenných 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>

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

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>

CSS

Premenné

Ako súčasť rozvíjajúceho sa prístupu premenných CSS od Bootstrapu, kontextové okná teraz používajú lokálne premenné CSS na .popovervylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

  --#{$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 premenné

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

Použitie

Povoliť vyskakovacie okná prostredníctvom JavaScriptu:

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

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

Použitie funkcie spopperConfig

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

Metódy

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

Diania

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