Popovers

Yfirlit

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

• Popovers treysta á þriðja aðila bókasafn Popper fyrir staðsetningu. Þú verður að hafa popper.min.js á undan bootstrap.js, eða nota einn bootstrap.bundle.min.jssem inniheldur Popper.
• Popovers krefjast popover 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 sprettiglugga

Eins og getið er hér að ofan verður þú að frumstilla sprettiglugga áður en hægt er að nota þá. Ein leið til að frumstilla alla sprettiglugga á síðu væri að velja þá eftir data-bs-toggleeiginleikum þeirra, eins og svo:

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

Sýning í beinni

Við notum JavaScript svipað og bútinn hér að ofan til að birta eftirfarandi lifandi sprettiglugga. Titlar eru stilltir með data-bs-titleog meginefni er stillt með 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>

Fjórar áttir

Fjórir valkostir eru í boði: efst, hægri, neðst og til vinstri. Leiðbeiningar eru speglaðar þegar Bootstrap er notað í RTL. Stilltu data-bs-placementtil að breyta um stefnu.

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

Sérsniðincontainer

Þ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. Þetta er algengt í móttækilegum töflum, inntakshópum og þess háttar.

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

Önnur staða þar sem þú vilt stilla skýran sérsniðna containereru sprettigluggar inni í valmynd til að tryggja að sprettigluggann sjálft sé bætt við formann. Þetta er sérstaklega mikilvægt fyrir sprettiglugga sem innihalda gagnvirka þætti - formgluggar munu fanga fókus, þannig að nema sprettiglugginn sé undirþáttur formsins, munu notendur ekki geta fókusað eða virkjað þessa gagnvirku þætti.

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

Sérsniðnar popovers

Þú getur sérsniðið útlit popovers með því að nota CSS breytur . Við stillum sérsniðinn flokk með data-bs-custom-class="custom-popover"til að stækka sérsniðið útlit okkar og notum það til að hnekkja sumum staðbundnum CSS breytum.

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

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

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

CSS

Breytur

Sem hluti af CSS breytum í þróun Bootstrap, nota popover nú staðbundnar CSS breytur á .popovertil að auka rauntíma aðlögun. Gildi fyrir CSS breyturnar eru stillt í gegnum Sass, þannig að Sass aðlögun er enn studd líka.

  --#{$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 breytur

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

Notkun

Virkja popover í gegnum JavaScript:

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

Valmöguleikar

Þar sem hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript geturðu bætt valkostsheiti við data-bs-, eins og í data-bs-animation="{value}". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr " camelCase " í " kebab-case " þegar þú sendir valkostina í gegnum gagnaeiginleika. Notaðu til dæmis data-bs-custom-class="beautifier"í staðinn fyrir data-bs-customClass="beautifier".

Frá og með Bootstrap 5.2.0 styðja allir íhlutir tilrauna frátekinn gagnaeiginleika data-bs-configsem getur hýst einfalda íhlutastillingu sem JSON streng. Þegar eining hefur data-bs-config='{"delay":0, "title":123}'og eiginleika verður data-bs-title="456"lokagildið og aðskildu gagnaeiginirnar munu hnekkja gildum sem gefin eru á . Að auki geta núverandi gagnaeiginleikar hýst JSON gildi eins og .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Að nota aðgerð meðpopperConfig

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

Aðferðir

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

Viðburðir

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