Popovers

Trosolwg

Pethau i'w gwybod wrth ddefnyddio'r ategyn popover:

• Mae Popovers yn dibynnu ar Popper y llyfrgell trydydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js, neu ddefnyddio un bootstrap.bundle.min.jssy'n cynnwys Popper.
• Mae Popovers angen yr ategyn popover fel dibyniaeth.
• Mae popovers yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
• Ni fydd hyd sero titlea contentgwerthoedd byth yn dangos popover.
• Nodwch container: 'body'er mwyn osgoi problemau rendro mewn cydrannau mwy cymhleth (fel ein grwpiau mewnbwn, grwpiau botwm, ac ati).
• Ni fydd sbarduno popovers ar elfennau cudd yn gweithio.
• Rhaid sbarduno popovers ar gyfer .disabledneu disabledelfennau ar elfen lapio.
• Pan gânt eu hysgogi o angorau sy'n lapio ar draws llinellau lluosog, bydd popovers yn cael eu canoli rhwng lled cyffredinol yr angorau. Defnyddiwch .text-nowrapar eich <a>s i osgoi'r ymddygiad hwn.
• Rhaid cuddio popovers cyn i'w elfennau cyfatebol gael eu tynnu o'r DOM.
• Gellir sbarduno popovers diolch i elfen y tu mewn i DOM cysgodol.

Daliwch ati i ddarllen i weld sut mae popovers yn gweithio gyda rhai enghreifftiau.

Enghreifftiau

Galluogi popovers

Fel y soniwyd uchod, rhaid i chi gychwyn popovers cyn y gellir eu defnyddio. Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-bs-togglepriodoledd, fel hyn:

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

Demo byw

Rydym yn defnyddio JavaScript tebyg i'r pyt uchod i wneud y popover byw canlynol. Gosodir teitlau trwy data-bs-titlea gosodir cynnwys y corff trwy 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>

Pedwar cyfeiriad

Mae pedwar opsiwn ar gael: top, dde, gwaelod, a chwith. Caiff cyfarwyddiadau eu hadlewyrchu wrth ddefnyddio Bootstrap yn RTL. Gosod data-bs-placementi newid y cyfeiriad.

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

Customcontainer

Pan fydd gennych rai arddulliau ar elfen rhiant sy'n ymyrryd â popover, byddwch am nodi arferiad containerfel bod HTML y popover yn ymddangos o fewn yr elfen honno yn lle hynny. Mae hyn yn gyffredin mewn tablau ymatebol, grwpiau mewnbwn, ac ati.

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

Sefyllfa arall lle byddwch chi eisiau gosod arferiad penodol containeryw popovers y tu mewn i ymgom moddol , i wneud yn siŵr bod y popover ei hun wedi'i atodi i'r moddol. Mae hyn yn arbennig o bwysig ar gyfer popovers sy'n cynnwys elfennau rhyngweithiol - bydd deialogau moddol yn dal ffocws, felly oni bai bod y popover yn elfen plentyn o'r moddol, ni fydd defnyddwyr yn gallu canolbwyntio neu actifadu'r elfennau rhyngweithiol hyn.

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

Popovers personol

Gallwch chi addasu ymddangosiad popovers gan ddefnyddio newidynnau CSS . Fe wnaethon ni osod dosbarth wedi'i data-bs-custom-class="custom-popover"deilwra i gwmpasu ein hymddangosiad arferol a'i ddefnyddio i ddiystyru rhai o'r newidynnau CSS lleol.

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

Diystyru ar y clic nesaf

Defnyddiwch y focussbardun i ddiystyru popovers ar glic nesaf y defnyddiwr ar elfen wahanol i'r elfen togl.

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

Elfennau anabl

Nid yw elfennau gyda'r disabledpriodoledd yn rhyngweithiol, sy'n golygu na all defnyddwyr hofran na chlicio arnynt i sbarduno popover (neu gyngor). Fel ateb i'r broblem, byddwch am sbarduno'r popover o ddeunydd lapio <div>neu <span>, sy'n ddelfrydol wedi'i wneud â ffocws bysellfwrdd gan ddefnyddio tabindex="0".

Ar gyfer sbardunau popover anabl, efallai y byddai'n well gennych hefyd data-bs-trigger="hover focus"fel bod y popover yn ymddangos fel adborth gweledol uniongyrchol i'ch defnyddwyr oherwydd efallai na fyddant yn disgwyl clicio ar elfen anabl.

<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

Newidynnau

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae popovers bellach yn defnyddio newidynnau CSS lleol ymlaen ar .popovergyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

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

Newidynnau Sass

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

Defnydd

Galluogi popovers trwy JavaScript:

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

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Defnyddio swyddogaeth gydapopperConfig

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

Dulliau

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

Digwyddiadau

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