Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
in English

Popovers

Doiciméadú agus samplaí chun popovers Bootstrap, cosúil leis na cinn a fhaightear in iOS, a chur le haon eilimint ar do shuíomh.

Forbhreathnú

Rudaí le fios agus an breiseán popover in úsáid:

  • Bíonn Popovers ag brath ar Phopper na leabharlainne 3ú páirtí le haghaidh suímh. Ní mór duit popper.min.js a chur san áireamh roimh bootstrap.js nó úsáid bootstrap.bundle.min.js/ bootstrap.bundle.jsina bhfuil Popper le go n-oibreoidh popovers!
  • Éilíonn Popovers an breiseán tooltip mar spleáchas.
  • Tá Popovers rogha an diúltaithe ar chúiseanna feidhmíochta, mar sin ní mór duit a thúsú iad féin .
  • Ní thaispeánfaidh fad náid titlecontentluachanna aon aníos choíche.
  • Sonraigh container: 'body'chun fadhbanna rindreála a sheachaint i gcomhpháirteanna níos casta (amhail ár ngrúpaí ionchuir, grúpaí cnaipí, srl).
  • Ní oibreofar popovers ar eilimintí ceilte.
  • Ní mór popovers .disableddisabledeilimintí a spreagadh ar eilimint chumhdaigh.
  • Nuair a spreagtar iad ó ancairí a théann trasna línte iolracha, díreofar na popovers idir leithead iomlán na n-ancairí. Bain úsáid as .text-nowrapar do <a>chuid chun an iompar seo a sheachaint.
  • Ní mór popovers a chur i bhfolach sula mbaintear na heilimintí comhfhreagracha as an DOM.
  • Is féidir popovers a spreagadh a bhuíochas le eilimint taobh istigh de scáth DOM.
De réir réamhshocraithe, úsáideann an chomhpháirt seo an sanitizer ábhar ionsuite, a stiallacha amach aon eilimintí HTML nach bhfuil ceadaithe go sainráite. Féach an rannán sláintíochta inár ndoiciméadú JavaScript le haghaidh tuilleadh sonraí.
Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist na meán. Féach an rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .

Lean ort ag léamh chun a fheiceáil conas a oibríonn popovers le roinnt samplaí.

Sampla: Cumasaigh popovers i ngach áit

Bealach amháin chun na míreanna aníos ar leathanach a thúsú ná iad a roghnú de réir a n- data-bs-toggletréith:

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

Sampla: Ag baint úsáide as an containerrogha

Nuair a bhíonn roinnt stíleanna agat ar eilimint tuismitheora a chuireann isteach ar theacht aníos, beidh tú ag iarraidh saincheaptha a shonrú containerionas go bhfeicfear HTML an popover laistigh den eilimint sin ina ionad sin.

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

Sampla

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

Ceithre threoir

Tá ceithre rogha ar fáil: ailíniú barr, dheis, bun agus clé. Léirítear treoracha nuair a bhíonn Bootstrap in úsáid in 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>

Ruaig an chéad chliceáil eile

Úsáid an focustruicear chun popovers a dhíbhe ar an gcéad chliceáil eile ar eilimint eile seachas an eilimint scoránaigh.

Marcáil shonrach ag teastáil le haghaidh díbhe-ar-chliceáil eile

Le haghaidh iompar ceart trasbhrabhsálaí agus tras-ardáin, ní mór duit an chlib a úsáid <a>, an <button>chlib, agus ní mór duit tabindextréith a chur san áireamh freisin.

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

Eilimintí faoi mhíchumas

Níl na heilimintí leis an disabledtréith idirghníomhach, rud a chiallaíonn nach féidir le húsáideoirí a bheith ag foluain nó cliceáil orthu chun aníos (nó leid uirlisí) a spreagadh. Mar réiteach oibre, beidh tú ag iarraidh an popover a spreagadh ó fhillteán <div><span>, go hidéalach atá dírithe ar mhéarchlár ag baint úsáide as tabindex="0".

Maidir le truicear aníos aníos faoi mhíchumas, b’fhéidir gurbh fhearr leat freisin data-bs-trigger="hover focus"ionas go bhfeicfear an aníos mar aiseolas amhairc láithreach do d’úsáideoirí mar go mb’fhéidir nach mbeidís ag súil le cliceáil ar eilimint díchumasaithe.

<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

Athróga

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

Úsáid

Cumasaigh popovers trí JavaScript:

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

Oibríonn popovers a dhéanamh d'úsáideoirí méarchláir agus teicneolaíochta cúnta

Chun gur féidir le húsáideoirí méarchláir do chuid popovers a ghníomhachtú, níor cheart duit ach iad a chur le heilimintí HTML atá go traidisiúnta dírithe ar mhéarchlár agus idirghníomhach (cosúil le naisc nó rialuithe foirmeacha). Cé gur féidir gnéithe treallach HTML (amhail <span>s) a fhócasú tríd an tabindex="0"tréith a chur leis, cuirfidh sé seo stadanna cluaisíní a d'fhéadfadh a bheith corraitheach agus mearbhallach ar eilimintí neamh-idirghníomhacha d'úsáideoirí méarchláir, agus ní fhógraíonn an chuid is mó de na teicneolaíochtaí cúnta faoi láthair ábhar an phreabfhuinneog sa chás seo . Ina theannta sin, ná bí ag brath go hiomlán hovermar spreag do popovers, mar go mbeidh sé seo dodhéanta iad a spreagadh d'úsáideoirí méarchláir.

Cé gur féidir leat HTML saibhir, struchtúrtha a chur isteach i popovers leis an htmlrogha, molaimid go láidir duit gan iomarca ábhar a chur leis. Is é an chaoi a n-oibríonn popovers faoi láthair ná go bhfuil a n-inneachar ceangailte leis an eilimint truicear leis an aria-describedbytréith nuair a thaispeánfar é. Mar thoradh air sin, fógrófar ábhar iomlán an popover d'úsáideoirí teicneolaíochta cúnta mar aon sruth fada, gan bhriseadh.

Ina theannta sin, cé gur féidir rialuithe idirghníomhacha (cosúil le heilimintí foirme nó naisc) a chur san áireamh i do popover (trí na gnéithe seo a chur leis na allowListtréithe agus na clibeanna ceadaithe), bí ar an eolas nach ndéanann an aníos aníos bainistiú ar ord fócas an mhéarchláir faoi láthair. Nuair a osclaíonn úsáideoir méarchláir preabfhuinneog, fanann an fócas ar an eilimint truicearaigh, agus toisc nach leanann an popover de ghnáth láithreach an truicear i struchtúr an doiciméid, níl aon ráthaíocht ann go mbeidh tú ag bogadh ar aghaidh/ag brúTABbogfaidh úsáideoir méarchláir isteach sa popover féin. I mbeagán focal, má chuirtear rialuithe idirghníomhacha le huasghrádú go simplí, is dócha go mbeidh na rialuithe seo dosroichte/do-úsáidte d'úsáideoirí méarchláir agus d'úsáideoirí teicneolaíochtaí cúnta, nó ar a laghad ord fócais fhoriomlán míloighciúil a dhéanamh. Sna cásanna seo, smaoinigh ar dialóg módúil a úsáid ina ionad sin.

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-bs-, mar atá i data-bs-animation="". Bí cinnte cineál an cháis den ainm rogha a athrú ó camelCase go cás ceibeab agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, in ionad úsáid a bhaint as data-bs-customClass="beautifier", bain úsáid as data-bs-custom-class="beautifier".

Tabhair faoi deara, ar chúiseanna slándála, nach féidir an sanitize, sanitizeFn, agus allowListroghanna a sholáthar trí úsáid a bhaint as tréithe sonraí.
Ainm Cineál Réamhshocrú Cur síos
animation Boole true Cuir trasdul céimnithe CSS i bhfeidhm ar an bpíosa aníos
container teaghrán | eilimint | bréagach false

Cuireann sé an popover le gné ar leith. Sampla: container: 'body'. Tá an rogha seo thar a bheith úsáideach sa mhéid is go gceadaíonn sé duit an popover a shuíomh i sreabhadh an doiciméid in aice leis an eilimint spreagthaigh - rud a chuirfidh cosc ​​ar an bpíosa aníos a bheith ag snámh ón eilimint spreagaithe le linn athrú méide fuinneoige.

content teaghrán | eilimint | feidhm ''

Luach réamhshocraithe an ábhair mura data-bs-contentbhfuil an aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.

delay uimhir | réad 0

Moill ag taispeáint agus i bhfolach an popover (ms) - ní bhaineann sé le cineál truicear láimhe

Má chuirtear uimhir ar fáil, cuirtear moill i bhfeidhm ar an dá cheilt/seó

Is é struchtúr an ábhair:delay: { "show": 500, "hide": 100 }

html Boole false Cuir HTML isteach sa popover. Má tá sé bréagach, innerTextbainfear úsáid as maoin chun ábhar a chur isteach sa DOM. Úsáid téacs má tá imní ort faoi ionsaithe XSS.
placement teaghrán | feidhm 'right'

Conas an popover a shuíomh - uathoibríoch | barr | bun | chlé | ceart.
Nuair autoa shonraítear é, athróidh sé an popover go dinimiciúil.

Nuair a úsáidtear feidhm chun an socrúchán a chinneadh, tugtar an nód DOM popover mar a chéad argóint agus nód DOM na heiliminte spreagúla mar an dara háit. Tá an thiscomhthéacs socraithe don chás aníos.

selector teaghrán | bréagach false Má chuirtear roghnóir ar fáil, déanfar réada aníos a tharmligean chuig na spriocanna sonraithe. Go praiticiúil, baintear úsáid as seo le gur féidir popovers a chur leis an ábhar HTML dinimiciúil. Féach é seo agus sampla faisnéiseach .
template teaghrán '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Bunús HTML le húsáid agus an popover á chruthú.

Déanfar na popover's titlea instealladh isteach sa .popover-header.

Déanfar na popover's contenta instealladh isteach sa .popover-body.

.popover-arrowbeidh an popover saighead.

Ba chóir go mbeadh an eilimint fillte is forimeallaí ag an .popoverrang.

title teaghrán | eilimint | feidhm ''

Luach teidil réamhshocraithe mura titlebhfuil an aitreabúid i láthair.

Má thugtar feidhm, glaofar í lena thistacar tagartha don eilimint a bhfuil an popover ceangailte léi.

trigger teaghrán 'click' Conas a spreagtar aníos - cliceáil | ainlíon | fócas | lámhleabhar. Is féidir leat pas a fháil truicear iolrach; iad a scaradh le spás. manualní féidir é a chomhcheangal le haon truicear eile.
fallbackPlacements eagar ['top', 'right', 'bottom', 'left'] Sainmhínigh socrúcháin chúltaca trí liosta socrúcháin a sholáthar in eagar (in ord tosaíochta). Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid iompair Popper
boundary teaghrán | eilimint 'clippingParents' Teorainn shrianta thar maoil an popover (ní bhaineann sé ach le modhnóir preventOverflow Popper). De réir réamhshocraithe tá sé 'clippingParents'agus is féidir glacadh le tagairt HTMLElement (trí JavaScript amháin). Le haghaidh tuilleadh faisnéise déan tagairt do dhoiciméid detectOverflow Popper .
customClass teaghrán | feidhm ''

Cuir ranganna leis an popover nuair a thaispeánfar é. Tabhair faoi deara go gcuirfear na ranganna seo leis i dteannta le ranganna ar bith a shonraítear sa teimpléad. Chun ranganna iolracha a chur leis, scar iad le spásanna: 'class-1 class-2'.

Is féidir leat feidhm a rith freisin ar cheart di teaghrán amháin a thabhairt ar ais ina bhfuil ainmneacha ranga breise.

sanitize Boole true Cumasaigh nó díchumasaigh an sláintíocht. Má chuirtear i ngníomh é 'template', 'content'agus 'title'déanfar roghanna a shláintiú. Féach an rannán sláintíochta inár ndoiciméadú JavaScript .
allowList réad Luach réamhshocraithe Réad ina bhfuil tréithe agus clibeanna ceadaithe
sanitizeFn null | feidhm null Anseo is féidir leat d'fheidhm sláintíochta féin a sholáthar. Féadfaidh sé seo a bheith úsáideach más fearr leat leabharlann thiomanta a úsáid chun sláintíocht a dhéanamh.
offset eagar | teaghrán | feidhm [0, 8]

Fritháireamh an popover i gcoibhneas lena sprioc. Is féidir leat teaghrán a chur isteach i tréithe sonraí le luachanna scartha le camóg mar:data-bs-offset="10,20"

Nuair a úsáidtear feidhm chun an fhritháireamh a chinneadh, tugtar le réad ina bhfuil an socrúchán popper, an tagairt, agus rects popper mar a chéad argóint. Ritear an nód DOM na heiliminte spreagúla mar an dara argóint. Caithfidh an fheidhm eagar a thabhairt ar ais le dhá uimhir: .[skidding, distance]

Le haghaidh tuilleadh eolais déan tagairt do dhoiciméid fhritháireamh Popper .

popperConfig null | réad | feidhm null

Chun cumraíocht réamhshocraithe Bootstrap Popper a athrú, féach cumraíocht Popper .

Nuair a úsáidtear feidhm chun cumraíocht Popper a chruthú, glaoitear í le réad a bhfuil cumraíocht réamhshocraithe Popper Bootstrap ann. Cabhraíonn sé leat an réamhshocrú a úsáid agus a chumasc le do chumraíocht féin. Caithfidh an fheidhm réad cumraíochta a thabhairt ar ais do Popper.

Tréithe sonraí le haghaidh popovers aonair

De rogha air sin, is féidir roghanna le haghaidh popovers aonair a shonrú trí úsáid a bhaint as tréithe sonraí, mar a mhínítear thuas.

Ag baint úsáide as feidhm lepopperConfig

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

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais .

seó

Nochtann popover eilimint. Filleann sé ar an nglaoiteoir sula dtaispeántar an t-athrú aníos (ie sula shown.bs.popoverdtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a spreagann an popover. Ní thaispeánfar popovers a bhfuil a theideal agus a n-ábhar ar fad nialasach.

myPopover.show()

ceilt

Folaíonn popover eilimint. Filleann sé ar an nglaoiteoir sula mbíonn an t-rabús aníos curtha i bhfolach (ie sula hidden.bs.popoverdtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a spreagann an popover.

myPopover.hide()

scoránaigh

Scoránaigh eilimint a popover. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an t-amóg aníos (.i. sula dtarlaíonn shown.bs.popovernó sula hidden.bs.popoverdtarlaíonn an teagmhas). Meastar gur “lámhleabhar” é seo a spreagann an popover.

myPopover.toggle()

a dhiúscairt

Seithí agus scriosann popover eilimint (Baintear sonraí stóráilte ar an eilimint DOM). Ní féidir popovers a úsáideann tarmligean (a chruthaítear ag baint úsáide as an selectorrogha ) a scrios ina n-aonar ar eilimintí truicear sliocht.

myPopover.dispose()

chumasú

Tugann sé an cumas a thaispeáint do popover eilimint. Tá popovers cumasaithe de réir réamhshocraithe.

myPopover.enable()

dhíchumasú

Baineann sé seo as an gcumas chun an popover eilimint a thaispeáint. Ní bheidh an popover in ann a thaispeáint ach amháin má tá sé ath-chumasaithe.

myPopover.disable()

scoránaigh Cumasaithe

Scoránaigh an cumas chun popover eilimint a thaispeáint nó a cheilt.

myPopover.toggleEnabled()

nuashonrú

Nuashonraítear suíomh popover eilimint.

myPopover.update()

faighInstance

Modh statach a cheadaíonn duit an t-ásc aníos a bhaineann le heilimint DOM a fháil

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

getOrCreateInstance

Modh statach a cheadaíonn duit an t-ásc aníos a bhaineann le heilimint DOM a fháil, nó ceann nua a chruthú ar eagla nár cuireadh tús leis

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

Imeachtaí

Cineál imeachta Cur síos
taispeáin.bs.píosa Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
taispeánta.bs.popover Tá an teagmhas seo bréan nuair a bhíonn an aníos infheicthe ag an úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
folaigh.bs.popover Cuirtear an teagmhas seo ar ceal láithreach nuair hidea ghlaoitear an modh ásc.
i bhfolach.bs.popover Tá an teagmhas seo bréan nuair a bhíonn an aníos aníos curtha i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
isteach.bs.popover Cuirtear an teagmhas seo ar ceal tar éis na show.bs.popoverhócáide nuair a chuirtear an teimpléad aníos leis an DOM.
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})