پاپورز

اوسر

Popover پلگ ان کي استعمال ڪرڻ وقت ڄاڻڻ لاء شيون:

• Popovers پوزيشن لاء ٽئين پارٽي لائبريري Popper تي ڀروسو . توھان کي شامل ڪرڻ گھرجي popper.min.js کان اڳ bootstrap.js، يا ھڪڙو استعمال ڪريو bootstrap.bundle.min.jsجنھن ۾ Popper شامل آھي.
• Popovers جي ضرورت آهي popover پلگ ان هڪ انحصار جي طور تي.
• Popovers ڪارڪردگي سببن لاء آپٽ-ان آهن، تنهنڪري توهان کي انهن کي پنهنجو پاڻ شروع ڪرڻ گهرجي .
• زيرو ڊگھائي title۽ contentقدر ڪڏهن به پاپ اوور نه ڏيکاريندا.
• container: 'body'وڌيڪ پيچيده اجزاء (جهڙوڪ اسان جي ان پٽ گروپن، بٽڻ گروپن، وغيره) ۾ رينجرنگ مسئلن کان بچڻ لاء وضاحت ڪريو .
• لڪيل عناصر تي پاپ اوور کي ڇڪڻ ڪم نه ڪندو.
• .disabledيا عنصرن لاءِ پوپ اوور disabledلازمي طور تي چاڙهيو وڃي ٿو چادر واري عنصر تي.
• جڏهن اينڪرز مان شروع ڪيو ويو آهي جيڪي ڪيترن ئي لائينن ۾ لپي ويندا آهن، پاپ اوور لنگر جي مجموعي چوٽي جي وچ ۾ مرڪز هوندا. هن رويي کان بچڻ لاء .text-nowrapتوهان جي ايس تي استعمال ڪريو .<a>
• Popovers کي لڪايو وڃي ان کان اڳ جو انهن جي لاڳاپيل عناصر کي DOM مان هٽايو ويو آهي.
• پاڇو 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 ۾ Bootstrap استعمال ڪرڻ وقت هدايتون نظر اچن ٿيون. 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'
})

حسب ضرورت

توهان CSS متغير استعمال ڪندي پاپ اوور جي ظاهر کي ترتيب ڏئي سگهو ٿا . اسان پنھنجي ڪسٽم ظاھر کي گنجائش ڏيڻ لاءِ ھڪڙي ڪسٽم ڪلاس مقرر ڪيو data-bs-custom-class="custom-popover"۽ ان کي استعمال ڪريو ڪجھ مقامي سي ايس ايس متغيرن کي ختم ڪرڻ لاءِ.

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

سي ايس ايس

متغير

بوٽ اسٽريپ جي ترقي ڪندڙ سي ايس ايس متغير جي نقطي جي حصي جي طور تي، پاپ اوور هاڻي مقامي سي ايس ايس متغير استعمال ڪندا آهن .popoverبهتر حقيقي وقت جي ڪسٽمائيزيشن لاءِ. 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);
  

سس متغير

$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}". ڊيٽا جي خاصيتن ذريعي اختيارن کي پاس ڪرڻ وقت اختياري جي صورت واري قسم کي تبديل ڪرڻ جي پڪ ڪريو ”ڪيم ڪيس“ مان ” ڪباب ڪيس “. مثال طور، data-bs-custom-class="beautifier"جي بدران استعمال ڪريو data-bs-customClass="beautifier".

Bootstrap 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...
})