Popovers

Akopọ

Awọn nkan lati mọ nigba lilo ohun itanna popover:

• Popovers gbarale ile-ikawe ẹnikẹta Popper fun ipo. O gbọdọ ni popper.min.js ṣaaju bootstrap.js, tabi lo ọkan bootstrap.bundle.min.jsti o ni Popper ninu.
• Popovers nilo ohun itanna agbejade bi igbẹkẹle kan.
• Popovers ti yọkuro fun awọn idi iṣẹ ṣiṣe, nitorinaa o gbọdọ ṣe ipilẹṣẹ wọn funrararẹ .
• Gigun odo titleati contentawọn iye kii yoo ṣe afihan agbejade kan.
• Pato container: 'body'lati yago fun awọn iṣoro ṣiṣe ni awọn paati eka diẹ sii (bii awọn ẹgbẹ titẹ sii, awọn ẹgbẹ bọtini, ati bẹbẹ lọ).
• Nfa popovers lori awọn eroja ti o farapamọ kii yoo ṣiṣẹ.
• Popovers fun .disabledtabi disablederoja gbọdọ wa ni jeki on a wrapper ano.
• Nigbati o ba fa lati awọn ìdákọró ti o fi ipari si awọn laini pupọ, awọn popovers yoo wa ni aarin laarin iwọn apapọ awọn ìdákọró. Lo .text-nowraplori rẹ <a>s lati yago fun yi ihuwasi.
• Popovers gbọdọ wa ni pamọ ṣaaju ki o to yọkuro awọn eroja ti o baamu wọn lati DOM.
• Popovers le ti wa ni jeki ọpẹ si ohun ano inu a ojiji DOM.

Jeki kika lati wo bi awọn popovers ṣe n ṣiṣẹ pẹlu awọn apẹẹrẹ diẹ.

Awọn apẹẹrẹ

Mu popovers ṣiṣẹ

Gẹgẹbi a ti sọ loke, o gbọdọ ṣe ipilẹṣẹ popovers ṣaaju ki wọn le ṣee lo. Ọna kan lati bẹrẹ gbogbo awọn agbejade lori oju-iwe kan yoo jẹ lati yan wọn nipasẹ data-bs-toggleẹda wọn, bii bẹ:

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

Live demo

A lo JavaScript ti o jọra si snippet loke lati ṣe agbejade ifiwe laaye atẹle. Awọn akọle ti ṣeto nipasẹ data-bs-titleati akoonu ara ti ṣeto nipasẹ 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>

Awọn itọnisọna mẹrin

Awọn aṣayan mẹrin wa: oke, ọtun, isalẹ, ati osi. Awọn itọnisọna jẹ digi nigba lilo Bootstrap ni RTL. Ṣeto data-bs-placementlati yi itọsọna naa pada.

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

Aṣacontainer

Nigba ti o ba ni diẹ ninu awọn aza lori kan obi ano ti o dabaru pẹlu a popover, o yoo fẹ lati pato kan aṣa containerki HTML popover han laarin ti ano dipo. Eyi jẹ wọpọ ni awọn tabili idahun, awọn ẹgbẹ titẹ sii, ati bii.

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

Ipo miiran nibiti iwọ yoo fẹ lati ṣeto aṣa ti o fojuhan containerjẹ awọn agbejade inu a modal dialog , lati rii daju pe agbejade funrararẹ ti wa ni afikun si modal. Eyi ṣe pataki ni pataki fun awọn agbejade ti o ni awọn eroja ibaraenisepo – awọn ibaraẹnisọrọ modal yoo dẹkun idojukọ, nitorinaa ayafi ti popover jẹ ẹya ọmọ ti modal, awọn olumulo kii yoo ni anfani si idojukọ tabi mu awọn eroja ibaraenisepo ṣiṣẹ.

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

Aṣa popovers

O le ṣe akanṣe irisi popovers nipa lilo awọn oniyipada CSS . A ṣeto kilasi aṣa kan pẹlu data-bs-custom-class="custom-popover"lati ṣe iwọn irisi aṣa wa ati lo lati bori diẹ ninu awọn oniyipada CSS agbegbe.

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

Yọọ kuro ni titẹ atẹle

Lo focusokunfa lati yọ awọn popovers kuro lori titẹ atẹle olumulo ti nkan ti o yatọ ju ano toggle.

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

Awọn eroja alaabo

Awọn eroja pẹlu disabledẹya kii ṣe ibaraenisepo, afipamo pe awọn olumulo ko le rababa tabi tẹ wọn lati ṣe okunfa agbejade (tabi ohun elo irinṣẹ). Gẹgẹbi iṣẹ-ṣiṣe, iwọ yoo fẹ lati ma ṣe okunfa popover lati inu iwe-ipamọ <div>tabi <span>, ti a ṣe ni aifọwọyi-idojukọ keyboard nipa lilo tabindex="0".

Fun awọn okunfa popover alaabo, o tun le fẹ data-bs-trigger="hover focus"ki popover naa han bi esi wiwo lẹsẹkẹsẹ si awọn olumulo rẹ nitori wọn le ma nireti lati tẹ lori nkan alaabo kan.

<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

Awọn oniyipada

Gẹ́gẹ́ bí ara Bootstrap’s títúnṣe àwọn oníyípadà CSS, àwọn àgbéjáde ń lo àwọn oniyipada CSS ti agbegbe .popoverfun imudara isọdi-akoko gidi. Awọn iye fun awọn oniyipada CSS ti ṣeto nipasẹ Sass, nitorinaa isọdi Sass tun ni atilẹyin, paapaa.

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

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

Lilo

Mu awọn agbejade ṣiṣẹ nipasẹ JavaScript:

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

Awọn aṣayan

Bi awọn aṣayan ṣe le kọja nipasẹ awọn abuda data tabi JavaScript, o le fi orukọ aṣayan si data-bs-, bi ninu data-bs-animation="{value}". Rii daju lati yi iru ọran ti orukọ aṣayan pada lati “ CamelCase ” si “ kebab-case ” nigba gbigbe awọn aṣayan nipasẹ awọn abuda data. Fun apẹẹrẹ, lo data-bs-custom-class="beautifier"dipo data-bs-customClass="beautifier".

Bi ti Bootstrap 5.2.0, gbogbo awọn paati ṣe atilẹyin abuda data ipamọ idanwodata-bs-config ti o le ṣe atunto paati ti o rọrun bi okun JSON kan. Nigbati ohun kan ba ni data-bs-config='{"delay":0, "title":123}'ati data-bs-title="456"awọn abuda, iye ikẹhin titleyoo jẹ 456ati awọn abuda data lọtọ yoo dojuti awọn iye ti a fun lori data-bs-config. Ni afikun, awọn abuda data ti o wa ni anfani lati gbe awọn iye JSON bii data-bs-delay='{"show":0,"hide":150}'.

Lilo iṣẹ pẹlupopperConfig

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

Awọn ọna

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

Awọn iṣẹlẹ

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