Popovers

Ülevaade

Asjad, mida popover-plugina kasutamisel teada saada:

• Popoverid kasutavad positsioneerimiseks kolmanda osapoole raamatukogu Popper . Peate sisestama popper.min.js enne sõnu bootstrap.jsvõi kasutama seda, bootstrap.bundle.min.jsmis sisaldab Popperit.
• Hüpikaknad nõuavad sõltuvusena hüpikakna pistikprogrammi .
• Hüpikaknad on jõudluse huvides lubatud, seega peate need ise lähtestama .
• Nullpikkus titleja contentväärtused ei näita kunagi hüpikaknaid.
• Määrake container: 'body', et vältida renderdamisprobleeme keerukamates komponentides (nt meie sisendrühmad, nupurühmad jne).
• Peidetud elementide hüpikaknade käivitamine ei toimi.
• Elementide .disabledvõi disabledelementide hüpikaknad tuleb käivitada ümbriselemendil.
• Kui hüpikaknad käivitatakse ankrute kaudu, mis keerduvad üle mitme joone, tsentreeritakse hüpikaknad ankrute üldlaiuse vahele. Sellise käitumise vältimiseks kasutage .text-nowrapseda oma peal .<a>
• Hüpikaknad tuleb peita enne, kui nende vastavad elemendid on DOM-ist eemaldatud.
• Hüpikaknaid saab käivitada tänu vari-DOM-i sees olevale elemendile.

Jätkake lugemist, et näha, kuidas hüpikaknad mõne näitega töötavad.

Näited

Luba hüpikaknad

Nagu eespool mainitud, peate hüpikaknad enne nende kasutamist initsialiseerima. Üks viis kõigi lehe hüpikaknate lähtestamiseks oleks valida need nende data-bs-toggleatribuudi järgi, näiteks:

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

Live demo

Kasutame järgmise reaalajas hüpikakna kuvamiseks ülaltoodud väljavõttega sarnast JavaScripti. Pealkirjad määratakse kaudu data-bs-titleja keha sisu määratakse 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>

Neli suunda

Saadaval on neli valikut: ülemine, parem, alumine ja vasak. Kui kasutate RTL-is Bootstrapi, siis juhiseid peegeldatakse. Määrake data-bs-placementsuunda muutma.

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

Kohandatudcontainer

Kui teil on ülemelemendil mõned stiilid, mis segavad hüpikakna esilekutsumist, soovite määrata kohandatud containerelemendi, nii et hüpikakna HTML kuvatakse selle elemendi sees. See on tavaline tundlikes tabelites, sisendrühmades jms.

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

Teine olukord, kus soovite selgesõnalise kohandamise seada, containeron hüpikaknad modaaldialoogis , et veenduda, et hüpikakna ise on modaalile lisatud . See on eriti oluline interaktiivseid elemente sisaldavate hüpikaknate puhul – modaaldialoogid püüavad fookuse kinni, nii et kui hüpikaken pole modaali alamelement, ei saa kasutajad neid interaktiivseid elemente fokuseerida ega aktiveerida.

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

Kohandatud hüpikaknad

Hüpikakende välimust saate kohandada CSS-i muutujate abil . Seadsime kohandatud klassi data-bs-custom-class="custom-popover"oma kohandatud välimuse ulatuseks ja kasutame seda mõne kohaliku CSS-i muutuja alistamiseks.

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

Loobu järgmisel klikil

Kasutage focuspäästikut hüpikaknate tühistamiseks, kui kasutaja järgmisel klõpsul lülituselemendist erineval elemendil klõpsab.

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

Keelatud elemendid

Atribuudiga elemendid disabledei ole interaktiivsed, mis tähendab, et kasutajad ei saa hüpikakna (või kohtspikri) käivitamiseks hõljutada või klõpsata. Lahendusena võiksite käivitada hüpikakna ümbrisest <div>või <span>ideaaljuhul klaviatuurile teravustatavast, kasutades tabindex="0".

Keelatud hüpikakna käivitajate puhul võite eelistada ka data-bs-trigger="hover focus"seda, et hüpikakna kuvatakse kasutajatele vahetu visuaalse tagasisidena, kuna nad ei pruugi eeldada, et nad klõpsavad keelatud elemendil.

<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

Muutujad

Bootstrapi areneva CSS-muutujate lähenemisviisi osana kasutavad hüpikud nüüd kohalikke CSS-i muutujaid, .popoveret täiustada reaalajas kohandamist. CSS-i muutujate väärtused määratakse Sassi kaudu, seega toetatakse endiselt ka Sassi kohandamist.

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

Sassi muutujad

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

Kasutamine

Luba hüpikaknad JavaScripti kaudu:

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

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Funktsiooni kasutamine koospopperConfig

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

meetodid

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

Sündmused

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