Popovers

Trosolwg

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

• Mae Popovers yn dibynnu ar Popper llyfrgell 3ydd parti ar gyfer lleoli. Rhaid i chi gynnwys popper.min.js cyn bootstrap.js neu use bootstrap.bundle.min.js/ bootstrap.bundle.jssy'n cynnwys Popper er mwyn i popovers weithio!
• Mae Popovers angen yr ategyn tooltip fel dibyniaeth.
• Mae popovers yn optio i mewn am resymau perfformiad, felly mae'n rhaid i chi eu cychwyn eich hun .
• Ni fydd sero-hyd 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.

Enghraifft: Galluogi popovers ym mhobman

Un ffordd o gychwyn pob popover ar dudalen fyddai eu dewis yn ôl eu data-bs-togglepriodoledd:

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

Enghraifft: Defnyddio'r containeropsiwn

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.

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

Enghraifft

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

Pedwar cyfeiriad

Mae pedwar opsiwn ar gael: aliniad uchaf, dde, gwaelod a chwith. Caiff cyfarwyddiadau eu hadlewyrchu wrth ddefnyddio Bootstrap yn 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>

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

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>

Sass

Newidynnau

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

Defnydd

Galluogi popovers trwy JavaScript:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-animation="". Gwnewch yn siŵr eich bod yn newid math achos enw'r opsiwn o camelCase i achos cebab wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, yn lle defnyddio data-bs-customClass="beautifier", defnyddiwch data-bs-custom-class="beautifier".

Defnyddio swyddogaeth gydapopperConfig

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

Dulliau

dangos

Yn datgelu popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos (hy cyn i'r shown.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover. Nid yw popovers y mae eu teitl a'u cynnwys o hyd sero byth yn cael eu harddangos.

myPopover.show()

cuddio

Yn cuddio popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei guddio (hy cyn i'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

myPopover.hide()

togl

Toglo popover elfen. Yn dychwelyd i'r galwr cyn i'r popover gael ei ddangos neu ei guddio (hy cyn i'r digwyddiad shown.bs.popoverneu'r hidden.bs.popoverdigwyddiad ddigwydd). Mae hwn yn cael ei ystyried yn sbardun “â llaw” o'r popover.

myPopover.toggle()

gwared

Yn cuddio ac yn dinistrio popover elfen (Yn dileu data sydd wedi'i storio ar yr elfen DOM). Ni all popovers sy'n defnyddio dirprwyo (sy'n cael eu creu gan ddefnyddio'r opsiwnselector ) gael eu dinistrio'n unigol ar elfennau sbardun disgynyddion .

myPopover.dispose()

galluogi

Yn rhoi'r gallu i popover elfen gael ei ddangos. Mae popovers yn cael eu galluogi yn ddiofyn.

myPopover.enable()

analluogi

Yn dileu'r gallu i ddangos popover elfen. Dim ond os caiff ei ail-alluogi y bydd y popover yn gallu cael ei ddangos.

myPopover.disable()

toggleEnabled

Toglo'r gallu i popover elfen gael ei ddangos neu ei guddio.

myPopover.toggleEnabled()

diweddariad

Yn diweddaru lleoliad popover elfen.

myPopover.update()

caelInstance

Dull statig sy'n eich galluogi i gael yr enghraifft popover sy'n gysylltiedig ag elfen DOM

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

getOrCreateInstance

Dull statig sy'n eich galluogi i gael yr enghraifft popover yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

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

Digwyddiadau

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