Popovers

Yfirlit

Atriði sem þarf að vita þegar popover viðbótin er notuð:

• Popovers treysta á þriðja aðila bókasafnið Popper fyrir staðsetningu. Þú verður að hafa popper.min.js fyrir bootstrap.js eða nota bootstrap.bundle.min.js/ bootstrap.bundle.jssem inniheldur Popper til að popovers virki!
• Popovers krefjast tooltip viðbótarinnar sem ósjálfstæði.
• Popovers eru valdir af frammistöðuástæðum, svo þú verður að frumstilla þá sjálfur .
• Núll-lengd titleog contentgildi munu aldrei sýna popover.
• Tilgreindu container: 'body'til að forðast að skila vandamálum í flóknari íhlutum (eins og inntakshópum okkar, hnappahópum osfrv.).
• Það mun ekki virka að kveikja á popover á földum þáttum.
• Popovers fyrir .disabledeða disabledþætti verður að kveikja á umbúðaeiningu.
• Þegar kveikt er á akkerum sem sveiflast yfir margar línur, verða sprettigluggar miðaðir á milli heildarbreiddar akkeranna. Notaðu .text-nowrapá þinn <a>s til að forðast þessa hegðun.
• Fela verður popover áður en samsvarandi þættir þeirra hafa verið fjarlægðir úr DOM.
• Hægt er að kveikja á popover þökk sé frumefni inni í skugga DOM.

Haltu áfram að lesa til að sjá hvernig popovers virka með nokkrum dæmum.

Dæmi: Virkja popover alls staðar

Ein leið til að frumstilla alla sprettiglugga á síðu væri að velja þá eftir data-bs-toggleeiginleikum þeirra:

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

Dæmi: Notkun containervalmöguleikans

Þegar þú ert með einhverja stíla á móðureiningu sem truflar sprettiglugga, viltu tilgreina sérsniðinn containerþannig að HTML sprettigluggans birtist innan þess þáttar í staðinn.

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

Dæmi

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

Fjórar áttir

Fjórir valkostir eru í boði: efst, hægri, neðst og vinstri stillt. Leiðbeiningar eru speglaðar þegar Bootstrap er notað í 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>

Hunsa við næsta smell

Notaðu focuskveikjuna til að hafna sprettiglugga þegar notandinn smellir næst á annan þátt en skiptaeininguna.

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

Óvirkir þættir

Þættir með disabledeigindinni eru ekki gagnvirkir, sem þýðir að notendur geta ekki sveiflað eða smellt á þá til að kalla fram sprettiglugga (eða tólábendingu). Sem lausn, þú vilt kveikja á popover frá umbúðum <div>eða <span>, helst gert lyklaborðsfókus með því að nota tabindex="0".

Fyrir óvirka sprettiglugga, gætirðu líka viljað data-bs-trigger="hover focus"að sprettigluggan birtist sem tafarlaus sjónræn endurgjöf til notenda þinna þar sem þeir búast kannski ekki við að smella á óvirkan þátt.

<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

Breytur

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

Notkun

Virkja popover í gegnum JavaScript:

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

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-bs-, eins og í data-bs-animation="". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr camelCase í kebab-case þegar þú sendir valkostina í gegnum gagnaeiginleika. Til dæmis, í stað þess að nota data-bs-customClass="beautifier"skaltu nota data-bs-custom-class="beautifier".

Að nota aðgerð meðpopperConfig

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

Aðferðir

sýna

Sýnir popover frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd (þ.e. áður en shown.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover. Popovers þar sem titill og innihald eru bæði núll lengd birtast aldrei.

myPopover.show()

fela sig

Felur sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en popover hefur verið falið (þ.e. áður en hidden.bs.popoveratburðurinn á sér stað). Þetta er talið „handvirk“ kveikja á popover.

myPopover.hide()

skipta

Kveikir á sprettiglugga frumefnis. Snýr aftur til þess sem hringir áður en sprettigluggan hefur verið sýnd eða falin (þ.e. áður en atburðurinn shown.bs.popovereða hidden.bs.popoverá sér stað). Þetta er talið „handvirk“ kveikja á popover.

myPopover.toggle()

farga

Felur og eyðir sprettiglugga frumefnis (Fjarlægir vistuð gögn á DOM-einingunni). Popovers sem nota úthlutun (sem eru búnar til með valmöguleikanum selector) er ekki hægt að eyða hver fyrir sig á afkvæma kveikjuþáttum.

myPopover.dispose()

virkja

Gefur popover frumefnis möguleika á að vera sýndur. Popovers eru sjálfgefið virkjaðir.

myPopover.enable()

slökkva

Fjarlægir möguleikann á að sprettiglugga frumefnis sé sýnt. Aðeins er hægt að sýna sprettigluggann ef hann er virkjaður aftur.

myPopover.disable()

toggleEnabled

Skiptir um möguleikann á að sprettiglugga frumefnis sé sýnt eða falið.

myPopover.toggleEnabled()

uppfærsla

Uppfærir staðsetningu sprettiglugga frumefnis.

myPopover.update()

getTilvik

Static aðferð sem gerir þér kleift að fá popover tilvikið tengt DOM frumefni

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

getOrCreateInstance

Statísk aðferð sem gerir þér kleift að fá popover-tilvikið tengt DOM-einingu, eða búa til nýjan ef það var ekki frumstillt

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

Viðburðir

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