Popovers

Přehled

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

• Popovers se při určování polohy spoléhají na knihovnu Popper třetí strany . Popper.min.js musíte zahrnout před bootstrap.js, nebo použít ten bootstrap.bundle.min.js, který obsahuje Popper.
• Popovers vyžadují popover plugin 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říklady

Povolit vyskakovací okna

Jak bylo uvedeno výše, musíte vyskakovací okna před použitím inicializovat. Jedním ze způsobů, jak inicializovat všechna vyskakovací okna na stránce, je vybrat je podle jejich data-bs-toggleatributu, například:

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

Živé demo

K vykreslení následujícího živého vyskakovacího okna používáme JavaScript podobný výše uvedenému úryvku. Titulky se nastavují pomocí data-bs-titlea obsah těla se nastavuje pomocí 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>

Čtyři směry

K dispozici jsou čtyři možnosti: nahoře, vpravo, dole a vlevo. Pokyny jsou zrcadleny při použití Bootstrapu v RTL. Nastavte data-bs-placementpro změnu směru.

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

Zvykcontainer

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. To je běžné u responzivních tabulek, vstupních skupin a podobně.

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

Další situací, kdy budete chtít nastavit explicitní vlastní container, jsou vyskakovací okna uvnitř modálního dialogu , abyste se ujistili, že vyskakovací okno je připojeno k modálnímu dialogu. To je důležité zejména pro vyskakovací okna, která obsahují interaktivní prvky – modální dialogy zachytí fokus, takže pokud není vyskakovací okno podřízeným prvkem modálního okna, uživatelé nebudou moci tyto interaktivní prvky zaměřit ani aktivovat.

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

Vlastní vyskakovací okna

Vzhled vyskakovacích oken můžete přizpůsobit pomocí proměnných CSS . Nastavili jsme vlastní třídu s data-bs-custom-class="custom-popover"pro rozsah našeho vlastního vzhledu a používáme ji k přepsání některých místních proměnný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>

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

CSS

Proměnné

Jako součást vyvíjejícího se přístupu Bootstrap proměnných CSS, vyskakovací okna nyní používají místní proměnné CSS .popoverpro lepší přizpůsobení v reálném čase. Hodnoty pro proměnné CSS se nastavují prostřednictvím Sass, takže přizpůsobení Sass je stále podporováno.

  --#{$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 proměnné

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

Povolit vyskakovací okna prostřednictvím JavaScriptu:

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

Možnosti

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

Použití funkce spopperConfig

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

Metody

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

Události

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