Popovers

Přehled

Co byste měli vědět při používání popover pluginu:

• Popovers se při polohování spoléhají na knihovnu Popper třetí strany . Aby popover fungovaly , musíte před bootstrap.js zahrnout popper.min.js nebo použít bootstrap.bundle.min.js/ bootstrap.bundle.jskterý obsahuje Popper!
• Popovers vyžadují plugin tooltip jako závislost.
• Popovers jsou z výkonnostních důvodů volitelná, takže je musíte inicializovat sami .
• Nulová délka titlea contenthodnoty nikdy nezobrazí vyskakovací okno.
• Určete container: 'body', abyste se vyhnuli problémům s vykreslováním ve složitějších komponentách (jako jsou naše vstupní skupiny, skupiny tlačítek atd.).
• Spouštění vyskakovacích oken na skrytých prvcích nebude fungovat.
• Popover pro .disablednebo disabledprvky musí být spuštěny na prvku obalu.
• Při spuštění z kotev, které se zalomí přes více čar, budou vyskakovací okna vycentrována mezi celkovou šířkou kotev. Chcete-li se tomuto chování vyhnout, použijte .text-nowrapna svém s.<a>
• Popovers musí být skryty, než budou jejich odpovídající prvky odstraněny z DOM.
• Popovers lze spustit díky prvku uvnitř stínového DOM.

Pokračujte ve čtení, abyste viděli, jak popover fungují s některými příklady.

Příklad: Povolit vyskakovací okna všude

Jedním ze způsobů, jak inicializovat všechna vyskakovací okna na stránce, je vybrat je podle jejich data-bs-toggleatributu:

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

Příklad: Použití containervolby

Pokud máte nějaké styly v nadřazeném prvku, které narušují vyskakovací okno, budete chtít zadat vlastní container, aby se v tomto prvku místo toho zobrazil kód HTML vyskakovacího okna.

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

Pří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>

Čtyři směry

K dispozici jsou čtyři možnosti: zarovnání nahoře, vpravo, dole a vlevo. Pokyny jsou zrcadleny při použití Bootstrap 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>

Zavřít při dalším kliknutí

Pomocí focusspouštěče zavřete vyskakovací okna při dalším kliknutí uživatele na jiný prvek, než je prvek přepínání.

<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 disabledatributem nejsou interaktivní, což znamená, že uživatelé na ně nemohou umístit kurzor myši nebo na ně kliknout, aby vyvolali vyskakovací okno (nebo popisek). Jako náhradní řešení budete chtít spustit vyskakovací okno z obalu <div>nebo <span>, v ideálním případě se lze zaměřit na klávesnici pomocí tabindex="0".

U zakázaných spouštěčů vyskakovacích oken můžete také upřednostnit data-bs-trigger="hover focus", aby se vyskakovací okno zobrazilo vašim uživatelům jako okamžitá vizuální zpětná vazba, protože nemusí očekávat, že kliknou na zakázaný prvek.

<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

Proměnné

$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žívání

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Možnosti

Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-bs-, jako v data-bs-animation="". Ujistěte se, že jste změnili typ případu názvu možnosti z camelCase na kebab-case při předávání možností prostřednictvím datových atributů. Například místo použití data-bs-customClass="beautifier"použijte data-bs-custom-class="beautifier".

Použití funkce spopperConfig

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

Metody

ukázat

Odhalí popover prvku. Vrátí se k volajícímu dříve, než se vyskakovací okno skutečně zobrazilo (tj. než dojde k shown.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna. Popovery, jejichž název i obsah mají nulovou délku, se nikdy nezobrazují.

myPopover.show()

skrýt

Skryje popover prvku. Vrátí se k volajícímu dříve, než byl vyskakovací okno skutečně skryt (tj. než dojde k hidden.bs.popoverudálosti). Toto je považováno za „ruční“ spuštění vyskakovacího okna.

myPopover.hide()

přepnout

Přepíná vyskakovací okno prvku. Vrátí se k volajícímu předtím, než se vyskakovací okno skutečně zobrazí nebo skryje (tj. než dojde k události shown.bs.popovernebo ). hidden.bs.popoverToto je považováno za „ruční“ spuštění vyskakovacího okna.

myPopover.toggle()

zlikvidovat

Skryje a zničí popover prvku (Odstraní uložená data v prvku DOM). Popovers, která používají delegování (která jsou vytvořena pomocí volby ) selector, nelze jednotlivě zničit na podřízených spouštěcích prvcích.

myPopover.dispose()

umožnit

Umožňuje zobrazení vyskakovacího okna prvku. Popovers jsou ve výchozím nastavení povoleny.

myPopover.enable()

zakázat

Odebere možnost zobrazení vyskakovacího okna prvku. Vyskakovací okno se bude moci zobrazit pouze v případě, že bude znovu povoleno.

myPopover.disable()

toggleEnabled

Přepíná možnost zobrazení nebo skrytí vyskakovacího okna prvku.

myPopover.toggleEnabled()

Aktualizace

Aktualizuje pozici vyskakovacího okna prvku.

myPopover.update()

getInstance

Statická metoda, která vám umožňuje získat instanci popover přidruženou k prvku DOM

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

getOrCreateInstance

Statická metoda, která vám umožňuje získat instanci popover přidruženou k prvku DOM nebo vytvořit novou v případě, že nebyla inicializována

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

Události

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