Popovers

کتنه

د پاپ اوور پلگ ان کارولو پرمهال د پوهیدو لپاره شیان:

• Popovers د موقعیت لپاره د دریمې ډلې کتابتون Popper باندې تکیه کوي . تاسو باید مخکې له مخکې popper.min.jsbootstrap.js شامل کړئ ، یا هغه وکاروئ bootstrap.bundle.min.jsکوم چې پوپر لري.
• Popovers د انحصار په توګه د پاپ اوور پلگ ان ته اړتیا لري.
• Popovers د فعالیت دلایلو لپاره غوره شوي، نو تاسو باید دوی پخپله پیل کړئ .
• صفر اوږدوالی titleاو contentارزښتونه به هیڅکله پاپ اوور ونه ښیې.
• په ډیرو پیچلو برخو کې د ستونزو د وړاندې کولو څخه مخنیوي لپاره مشخص container: 'body'کړئ (لکه زموږ د ننوتلو ګروپونه، د تڼۍ ګروپونه، او نور).
• په پټو عناصرو کې د پاپورز رامینځته کول به کار ونکړي.
• .disabledد یا عناصرو لپاره پاپورونه disabledباید په ریپر عنصر کې پیل شي.
• کله چې د اینکرونو څخه رامینځته کیږي چې په ډیری لینونو کې پوښل کیږي، پاپورونه به د لنگر د ټولیز عرض تر مینځ متمرکز وي. د دې چلند څخه د مخنیوي لپاره .text-nowrapپه خپلو کې کار واخلئ .<a>
• پوپورونه باید مخکې له دې چې د دوی اړوند عناصر د DOM څخه لیرې شي پټ شي.
• Popovers د سیوري DOM دننه د عنصر څخه مننه رامینځته کیدی شي.

لوستلو ته دوام ورکړئ ترڅو وګورئ چې پاپور د ځینې مثالونو سره څنګه کار کوي.

مثالونه

popovers فعال کړئ

لکه څنګه چې پورته یادونه وشوه، تاسو باید مخکې له دې چې کارول کیدی شي پاپورونه پیل کړئ. په یوه پاڼه کې د ټولو پاپورونو پیل کولو یوه لاره به دا وي چې دوی د دوی د data-bs-toggleځانګړتیاوو له مخې غوره کړي، لکه:

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

ژوندۍ ډیمو

موږ د لاندې ژوندی پاپ اوور وړاندې کولو لپاره پورتنۍ ټوټې ته ورته جاواسکریپټ کاروو. سرلیکونه له لارې تنظیم شوي data-bs-titleاو د بدن مینځپانګه له لارې تنظیم شوې 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>

څلور لارې

څلور اختیارونه شتون لري: پورته، ښیې، ښکته او کیڼ. په RTL کې د بوټسټریپ کارولو په وخت کې لارښوونې منعکس کیږي. data-bs-placementد سمت بدلولو لپاره تنظیم کړئ .

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

ګمرکcontainer

کله چې تاسو په اصلي عنصر کې ځینې سټایلونه لرئ چې د پاپ اوور سره مداخله کوي، تاسو غواړئ یو دود مشخص کړئ containerترڅو د پاپ اوور HTML د دې عنصر په ځای کې ښکاره شي. دا په ځواب ویونکي جدولونو، ان پټ ګروپونو او داسې نورو کې عام دی.

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

یو بل حالت چیرې چې تاسو غواړئ یو څرګند دود تنظیم کړئ د موډل ډیالوګcontainer دننه پاپ اوور دي ، ترڅو ډاډ ترلاسه کړئ چې پاپ اوور پخپله موډل کې ضمیمه شوی. دا په ځانګړي ډول د پاپورونو لپاره مهم دی چې متقابل عناصر لري - د موډل ډیالوګونه به تمرکز ودروي، نو تر هغه چې پاپ اوور د موډل ماشوم عنصر نه وي، کارونکي به ونشي کولی دا متقابل عناصر تمرکز یا فعال کړي.

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

دودیز پاپورونه

تاسو کولی شئ د سی ایس ایس متغیرونو په کارولو سره د پاپورونو بڼه تنظیم کړئ . موږ د خپل دودیز ظاهري اندازې لپاره یو دودیز ټولګي ترتیب data-bs-custom-class="custom-popover"کړو او د ځینې محلي CSS متغیرونو له مینځه وړلو لپاره یې وکاروو.

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

په بل کلیک کې رد کړئ

focusد ټګل عنصر په پرتله د مختلف عنصر په راتلونکي کلیک کې د پاپورونو د لرې کولو لپاره محرک وکاروئ .

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

غیر فعال عناصر

د ځانګړتیا سره عناصر disabledمتقابل نه دي، پدې معنی چې کاروونکي نشي کولی د پاپ اوور (یا اوزار ټایپ) محرک کولو لپاره هوور یا کلیک وکړي. د یوې حل لارې په توګه، تاسو غواړئ چې پاپ اوور د ریپر څخه <div>یا <span>په مثالي توګه د کیبورډ په کارولو سره د تمرکز وړ جوړ کړئ tabindex="0".

د معیوب شوي پاپ اوور محرکاتو لپاره، تاسو ممکن دا هم غوره کړئ data-bs-trigger="hover focus"چې پاپ اوور ستاسو کاروونکو ته د سمدستي بصري فیډبیک په توګه ښکاري ځکه چې دوی ممکن په معیوب عنصر باندې د کلیک کولو تمه ونه کړي.

<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 متغیر تګلارې د یوې برخې په توګه، پاپور اوس د .popoverریښتیني وخت اصلاح کولو لپاره ځایی CSS متغیرونه کاروي. د CSS متغیرونو لپاره ارزښتونه د Sass له لارې تنظیم شوي، نو د Sass تخصیص لاهم هم ملاتړ کیږي.

  --#{$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 متغیرات

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

کارول

د جاواسکریپټ له لارې پاپور فعال کړئ:

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

اختیارونه

لکه څنګه چې اختیارونه د ډیټا ځانګړتیاو یا جاوا سکریپټ له لارې لیږدول کیدی شي، تاسو کولی شئ د اختیار نوم په کې ضمیمه کړئ data-bs-، لکه څنګه چې په کې data-bs-animation="{value}". ډاډ ترلاسه کړئ چې د اختیار نوم د قضیې ډول د " camelCase " څخه " کباب-کیس " ته بدل کړئ کله چې اختیارونه د ډیټا ځانګړتیاو له لارې تیریږي. د مثال په توګه، د data-bs-custom-class="beautifier"ځای پرځای وکاروئ data-bs-customClass="beautifier".

د بوټسټریپ 5.2.0 پورې ، ټولې برخې د تجربې خوندي شوي ډیټا ځانګړتیا ملاتړ کوي data-bs-configچې کولی شي د JSON سټرینګ په توګه د ساده اجزاو ترتیب ځای په ځای کړي. کله چې یو عنصر ولري data-bs-config='{"delay":0, "title":123}'او data-bs-title="456"ځانګړتیاوې ولري، وروستی titleارزښت به وي 456او د جلا معلوماتو ځانګړتیاوې به په ورکړل شوي ارزښتونو باندې غالب شي data-bs-config. برسېره پردې، د موجوده ډاټا ځانګړتیاوې د JSON ارزښتونو لکه data-bs-delay='{"show":0,"hide":150}'.

سره د فنکشن کارولpopperConfig

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

میتودونه

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

پیښې

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