Popovers

Ħarsa ġenerali

Affarijiet li għandek tkun taf meta tuża l-plugin popover:

• Popovers jiddependu fuq il-librerija ta 'parti terza Popper għall-ippożizzjonar. Trid tinkludi popper.min.js qabel bootstrap.js, jew tuża waħda bootstrap.bundle.min.jsli fiha Popper.
• Popovers jeħtieġu l- plugin popover bħala dipendenza.
• Popovers huma opt-in għal raġunijiet ta' prestazzjoni, għalhekk trid tinizjalizzahom lilek innifsek .
• Tul żero titleu contentvaluri qatt mhu se juru popover.
• Speċifika container: 'body'biex tevita problemi ta' rendering f'komponenti aktar kumplessi (bħal gruppi ta' input tagħna, gruppi ta' buttuni, eċċ).
• Li tqajjem popovers fuq elementi moħbija mhux se taħdem.
• Popovers għal .disabledjew disabledelementi għandhom jiġu attivati ​​fuq element tat-tgeżwir.
• Meta attivata minn ankri li jkebbew fuq linji multipli, popovers se jkunu ċċentrati bejn il-wisa 'ġenerali tal-ankri. Uża .text-nowrapfuq tiegħek <a>biex tevita din l-imġieba.
• Popovers għandhom ikunu moħbija qabel ma l-elementi korrispondenti tagħhom ikunu tneħħew mid-DOM.
• Popovers jistgħu jiġu attivati ​​grazzi għal element ġewwa dell DOM.

Kompli aqra biex tara kif jaħdmu popovers b'xi eżempji.

Eżempji

Ippermetti popovers

Kif imsemmi hawn fuq, trid initialize popovers qabel ma jkunu jistgħu jintużaw. Mod wieħed biex jiġu inizjalizzati l-popovers kollha fuq paġna jkun li tagħżelhom skont l- data-bs-toggleattribut tagħhom, bħal dan:

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

Demo live

Aħna nużaw JavaScript simili għas-snippet hawn fuq biex nirrendu l-popover live li ġej. It-titoli huma stabbiliti permezz data-bs-titleu l-kontenut tal-korp huwa stabbilit permezz 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>

Erba' direzzjonijiet

Erba' għażliet huma disponibbli: fuq, lemin, qiegħ u xellug. Id-direzzjonijiet huma riflessi meta tuża Bootstrap f'RTL. Issettja data-bs-placementbiex tibdel id-direzzjoni.

<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

Meta jkollok xi stili fuq element ġenitur li jinterferixxu ma 'popover, tkun trid tispeċifika drawwa containersabiex l-HTML tal-popover jidher f'dak l-element minflok. Dan huwa komuni f'tabelli li jirrispondu, gruppi ta 'input, u affarijiet simili.

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

Sitwazzjoni oħra fejn tkun trid tissettja użanza espliċita containerhuma popovers ġewwa dialog modali , biex tiżgura li l-popover innifsu huwa mehmuż mal-modal. Dan huwa partikolarment importanti għall-popovers li fihom elementi interattivi – id-djalogi modali se jonsbu l-fokus, għalhekk sakemm il-popover ma jkunx element tifel tal-modal, l-utenti ma jkunux jistgħu jiffokaw jew jattivaw dawn l-elementi interattivi.

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

Popovers tad-dwana

Tista' tippersonalizza d-dehra tal-popovers billi tuża varjabbli CSS . Aħna waqqafna klassi tad-dwana data-bs-custom-class="custom-popover"biex niskopru d-dehra tad-dwana tagħna u nużawha biex tegħleb xi wħud mill-varjabbli CSS lokali.

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

Tiċħad fuq ikklikkja li jmiss

Uża l- focusgrillu biex tkeċċi popovers fuq il-klikk li jmiss tal-utent ta 'element differenti mill-element 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'
})

Elementi b'diżabilità

L-elementi bl- disabledattribut mhumiex interattivi, jiġifieri l-utenti ma jistgħux jgħadduhom jew ikklikkjahom biex iqanqlu popover (jew tooltip). Bħala soluzzjoni, tkun trid tiskatta l-popover minn tgeżwir <div>jew <span>, idealment magħmula li tiffoka fuq it-tastiera billi tuża tabindex="0".

Għal popover triggers b'diżabilità, tista 'wkoll tippreferi data-bs-trigger="hover focus"sabiex il-popover jidher bħala feedback viżwali immedjat lill-utenti tiegħek peress li jistgħu ma jistennewx li jikklikkjaw fuq element b'diżabilità.

<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

Varjabbli

Bħala parti mill-approċċ tal-varjabbli CSS li qed jevolvu ta' Bootstrap, il-popovers issa jużaw varjabbli CSS lokali fuq .popovergħal customization mtejba f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

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

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

Użu

Ippermetti popovers permezz ta' JavaScript:

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

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Bl-użu tal-funzjoni mapopperConfig

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

Metodi

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

Avvenimenti

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