Popovers

Dulmar

Waxyaabaha ay tahay in la ogaado marka la isticmaalayo popover plugin:

• Popovers waxay ku tiirsan yihiin qaybta saddexaad ee maktabadda Popper si loo meeleeyo. Waa inaad ku darto popper.min.js ka hor bootstrap.js, ama isticmaal mid ka bootstrap.bundle.min.jskooban Popper.
• Popovers waxay u baahan yihiin plugin popover ah sida ku tiirsanaanta.
• Popovers waxay u soo galeen sababo waxqabad dartood, marka waa inaad adigu bilawdaa .
• Dhererka eber titleiyo contentqiyamku weligood ma muujin doonaan popover.
• Qeex container: 'body'si aad uga fogaato soo jeedinta dhibaatooyinka qaybo badan oo kakan (sida kooxahayada wax gelinta, kooxaha badhanka, iwm).
• Kicinta popovers ee walxaha qarsoon ma shaqayn doono.
• Popovers .disabledama disabledcuriyayaasha waa in lagu kiciyo curiyaha duubka ah.
• Marka uu ka kiciyo barroosinno isku duuban dhowr xariiq, popovers waxay dhexda u ahaan doonaan ballaca guud ee barroosinnada. Isticmaal s si .text-nowrapaad <a>uga fogaato dhaqankan.
• Rabshadaha waa in la qariyaa ka hor inta aan laga saarin walxaha u dhigma ee DOM.
• Popovers waa la kicin karaa iyada oo ay ugu wacan tahay shay ku jira hadhka DOM.

Sii wad akhri si aad u aragto sida popovers ula shaqeeyaan tusaalooyinka qaarkood.

Tusaalooyinka

Daar popovers

Sida kor ku xusan, waa inaad bilowdaa popovers ka hor inta aan la isticmaalin. Hal dariiqo oo lagu bilaabi karo dhammaan popovers bogga waxay noqon kartaa in lagu xusho data-bs-togglesifadooda, sida:

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

Muujinta tooska ah

Waxaan isticmaalnaa JavaScript la mid ah jeex-jeexa sare si aan u soo bandhigno popover-ka soo socda. Ciwaanka waxa loo dajiyay iyada data-bs-titleoo waxa jidhka ku jirana lagu dejiyay 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>

Afar jiho

Afar doorasho ayaa diyaar ah: sare, midig, hoose, iyo bidix. Tilmaamaha waa la milicsadaa marka la isticmaalayo Bootstrap gudaha RTL. U deji data-bs-placementsi aad u bedesho jihada

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

Caadiyancontainer

Markaad haysatid qaabab qaar oo ah walxaha waalidka ee farageliya popover, waxaad u baahan doontaa inaad qeexdo caado containersi HTML popover's uu uga dhex muuqdo qaybtaas. Tani waxay ku badan tahay miisaska ka jawaaba, kooxaha wax gelinta, iyo wixii la mid ah.

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

Xaalad kale oo aad rabto inaad dejiso caado cad containerayaa ah popovers gudaha wada hadal modal , si aad u hubiso in popover laftiisa uu ku lifaaqan yahay habka. Tani waxay si gaar ah muhiim ugu tahay popovers oo ay ku jiraan walxo is-dhexgal ah - modal dialogs ayaa dabin doona diiradda, markaa ilaa popoverku aanu ahayn cunsurka habka, isticmaalayaashu ma awoodi doonaan inay diiradda saaraan ama dhaqaajiyaan walxahan is-dhexgalka.

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

popovers Custom

Waxaad ku habeyn kartaa muuqaalka popovers adigoo isticmaalaya doorsoomayaasha CSS . Waxaan dejinay fasal gaar ah data-bs-custom-class="custom-popover"si aan u cabbirno muuqaalkayaga caadada ah oo aan u isticmaalno si aan uga gudubno doorsoomayaasha CSS ee maxalliga ah.

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

Ka saar marka xigta guji

Isticmaal focuskiciyeyaasha si aad u tirtirto popovers ee isticmaalaha gujinta xigta ee shay ka duwan curiyaha beddelka.

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

Curiyayaasha naafada

Qaybaha sifada leh disabledma aha kuwo is dhexgal ah, taasoo la micno ah in isticmaalayaashu aanay kor u qaadi karin ama aanay gujin karin si ay u kiciyaan popover (ama qalab). Xakameyn ahaan, waxaad u baahan doontaa inaad ka kiciso popover ka duubabka <div>ama <span>, sida habboon loo sameeyay kiiboodhka diiradda saaraya iyadoo la adeegsanayo tabindex="0".

Kiciyeyaasha popover naafada, waxa kale oo aad doorbidi kartaa data-bs-trigger="hover focus"si popover-ku ugu muuqdo jawaab celin muuqaal degdeg ah isticmaalayaashaada maadaama laga yaabo in aanay filanayn inay gujiyaan shay naafada ah.

<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

Kala duwanaansho

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, popovers hadda waxay isticmaalaan doorsoomayaasha CSS ee maxalliga ah .popoversi loo hagaajiyo habeynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

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

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

Isticmaalka

U oggolow popovers iyada oo loo marayo JavaScript:

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Isticmaalka shaqada lehpopperConfig

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

Hababka

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

Dhacdooyinka

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