Popovers

অভাৰভিউ

popover প্লাগইন ব্যৱহাৰ কৰাৰ সময়ত জানিবলগীয়া কথাবোৰ:

• Popovers য়ে স্থান নিৰ্ধাৰণৰ বাবে তৃতীয় পক্ষৰ লাইব্ৰেৰী Popper ৰ ওপৰত নিৰ্ভৰ কৰে । আপুনি popper.min.js অন্তৰ্ভুক্ত কৰিব লাগিব , bootstrap.jsবা bootstrap.bundle.min.jsPopper ধাৰণ কৰা এটা ব্যৱহাৰ কৰক।
• Popovers এটা নিৰ্ভৰশীলতা হিচাপে popover প্লাগইনৰ প্ৰয়োজন ।
• Popovers পৰিৱেশনৰ কাৰণে অপ্ট-ইন হয়, গতিকে আপুনি নিজেই সিহতক আৰম্ভ কৰিব লাগিব ।
• শূন্য-দৈৰ্ঘ্য titleআৰু contentমানসমূহে কেতিয়াও পপঅভাৰ দেখুৱাব নোৱাৰে।
• container: 'body'অধিক জটিল উপাদানসমূহত ৰেণ্ডাৰ সমস্যা এৰাই চলিবলৈ ধাৰ্য্য কৰক (যেনে আমাৰ ইনপুট গোটসমূহ, বুটাম গোটসমূহ, ইত্যাদি)।
• লুকাই থকা উপাদানসমূহৰ ওপৰত পপঅভাৰ ট্ৰিগাৰ কৰিলে কাম নহ’ব।
• .disabledবা উপাদানসমূহৰ বাবে Popovers disabledএটা ৰেপাৰ উপাদানত ট্ৰিগাৰ কৰিব লাগিব।
• যেতিয়া একাধিক লাইনৰ ওপৰেৰে ৰেপ কৰা এংকৰৰ পৰা ট্ৰিগাৰ কৰা হয়, পপঅভাৰসমূহ এংকৰৰ সামগ্ৰিক প্ৰস্থৰ মাজত কেন্দ্ৰীভূত কৰা হ'ব। এই আচৰণ এৰাই চলিবলৈ .text-nowrapআপোনাৰ s ত ব্যৱহাৰ কৰক ।<a>
• DOM ৰ পৰা ইয়াৰ সংশ্লিষ্ট উপাদানসমূহ আঁতৰোৱাৰ আগতে Popovers লুকুৱাব লাগিব।
• এটা ছাঁ DOM ৰ ভিতৰৰ এটা উপাদানৰ বাবে ধন্যবাদ Popovers ট্ৰিগাৰ কৰিব পাৰি।

কিছুমান উদাহৰণৰ সৈতে পপঅভাৰে কেনেকৈ কাম কৰে চাবলৈ পঢ়ি থাকিব।

উদাহৰণ

popovers সক্ষম কৰক

ওপৰত উল্লেখ কৰা অনুসৰি, আপুনি 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'
})

কাষ্টম popovers

আপুনি CSS চলকসমূহ ব্যৱহাৰ কৰি পপঅভাৰসমূহৰ ৰূপ স্বনিৰ্বাচিত কৰিব পাৰিব । আমি আমাৰ কাষ্টম ৰূপৰ পৰিসৰৰ বাবে এটা কাষ্টম ক্লাছ ছেট কৰোঁ 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>

চি এছ এছ

চলকসমূহ

Bootstrap ৰ বিকাশশীল CSS চলকসমূহ পদ্ধতিৰ অংশ হিচাপে, popovers এতিয়া .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;

ব্যৱহাৰ

জাভাস্ক্রিপ্টৰ যোগেদি popovers সামৰ্থবান কৰক:

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

বিকল্পসমূহ

যিহেতু বিকল্পসমূহক তথ্য বৈশিষ্ট্যসমূহ বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি, আপুনি এটা বিকল্পৰ নাম যোগ কৰিব পাৰে data-bs-, যেনে data-bs-animation="{value}". ডাটা বৈশিষ্ট্যসমূহৰ জৰিয়তে বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্পৰ নামৰ কেছৰ ধৰণ “ camelCase ” ৰ পৰা “ kebab-case ” লৈ সলনি কৰাটো নিশ্চিত কৰক । উদাহৰণস্বৰূপে, 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...
})