Popovers

অভাৰভিউ

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

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

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

উদাহৰণ: সকলোতে পপঅভাৰসমূহ সক্ষম কৰক

এটা পৃষ্ঠাত সকলো পপঅভাৰ আৰম্ভ কৰাৰ এটা উপায় হ'ব সিহতক সিহঁতৰ data-bs-toggleবৈশিষ্ট্য অনুসৰি নিৰ্ব্বাচন কৰা:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

উদাহৰণ: containerবিকল্প ব্যৱহাৰ কৰা

যেতিয়া আপোনাৰ এটা মূল উপাদানত কিছুমান শৈলী থাকে যি এটা পপঅভাৰৰ সৈতে হস্তক্ষেপ কৰে, আপুনি এটা স্বনিৰ্বাচিত ধাৰ্য্য কৰিব বিচাৰিব containerযাতে পপঅভাৰৰ HTML ইয়াৰ পৰিবৰ্তে সেই উপাদানৰ ভিতৰত উপস্থিত হয়।

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

উদাহৰণ

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

চাৰিটা দিশ

চাৰিটা বিকল্প উপলব্ধ: ওপৰ, সোঁ, তললৈ, আৰু বাওঁ প্ৰান্তিককৃত। RTL ত Bootstrap ব্যৱহাৰ কৰাৰ সময়ত নিৰ্দেশনাসমূহ প্ৰতিফলিত কৰা হয় ।

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

পৰৱৰ্তী ক্লিকত ডিচমিছ কৰক

focusটগল উপাদানতকৈ বেলেগ উপাদানৰ ব্যৱহাৰকাৰীৰ পৰৱৰ্তী ক্লিকত পপঅভাৰসমূহ বাতিল কৰিবলৈ ট্ৰিগাৰ ব্যৱহাৰ কৰক ।

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.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-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

ব্যৱহাৰ

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

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-bs-, যেনে data-bs-animation="". তথ্য বৈশিষ্ট্যসমূহৰ যোগেদি বিকল্পসমূহ পাছ কৰাৰ সময়ত বিকল্প নামৰ কেছৰ ধৰণ camelCase ৰ পৰা kebab-case লৈ সলনি কৰাটো নিশ্চিত কৰক। উদাহৰণস্বৰূপ, ব্যৱহাৰ কৰাৰ পৰিবৰ্তে data-bs-customClass="beautifier", ব্যৱহাৰ কৰক data-bs-custom-class="beautifier"।

ৰ সৈতে ফাংচন ব্যৱহাৰ কৰাpopperConfig

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

পদ্ধতিসমূহ

প্ৰদৰ্শনী

এটা উপাদানৰ পপঅভাৰ প্ৰকাশ কৰে। পপঅভাৰ প্ৰকৃততে দেখুওৱাৰ আগতে (অৰ্থাৎ shown.bs.popoverইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক পপঅভাৰৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়। যিবোৰ প’প’ৰ শিৰোনাম আৰু বিষয়বস্তু দুয়োটা শূন্য-দৈৰ্ঘ্যৰ, সেইবোৰ কেতিয়াও প্ৰদৰ্শিত নহয়।

myPopover.show()

লুকাই থকা

এটা উপাদানৰ পপঅভাৰ লুকুৱাই ৰাখে। পপঅভাৰ প্ৰকৃততে লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ hidden.bs.popoverইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক পপঅভাৰৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়।

myPopover.hide()

টগল কৰক

এটা উপাদানৰ পপঅভাৰ টগল কৰে। পপঅভাৰ প্ৰকৃততে দেখুওৱা বা লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ shown.bs.popoverবা hidden.bs.popoverইভেন্ট ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। ইয়াক পপঅভাৰৰ “মেনুৱেল” ট্ৰিগাৰিং বুলি গণ্য কৰা হয়।

myPopover.toggle()

নিষ্কাশন কৰক

এটা উপাদানৰ পপঅভাৰ লুকুৱাই ৰাখে আৰু ধ্বংস কৰে (DOM উপাদানত সংৰক্ষিত তথ্য আঁতৰায়)। ডেলিগেচন ব্যৱহাৰ কৰা প'প'ভাৰসমূহ (যিবোৰ বিকল্প ব্যৱহাৰ কৰিselector সৃষ্টি কৰা হয় ) বংশধৰ ট্ৰিগাৰ উপাদানসমূহত পৃথকে পৃথকে ধ্বংস কৰিব নোৱাৰি।

myPopover.dispose()

সক্ষম কৰা

এটা উপাদানৰ পপঅভাৰক দেখুৱাব পৰা ক্ষমতা দিয়ে। Popovers অবিকল্পিতভাৱে সামৰ্থবান কৰা হৈছে।

myPopover.enable()

অক্ষম

এটা উপাদানৰ পপঅভাৰ দেখুৱাব পৰা ক্ষমতা আঁতৰায়। পপঅভাৰটো পুনৰ সক্ৰিয় কৰিলেহে দেখুৱাব পাৰিব।

myPopover.disable()

toggleসামৰ্থবান কৰা হৈছে

এটা উপাদানৰ পপঅভাৰ দেখুৱা বা লুকুৱাব পৰা ক্ষমতা টগল কৰে।

myPopover.toggleEnabled()

নবীকৰণ

এটা উপাদানৰ পপঅভাৰৰ অৱস্থান আপডেট কৰে।

myPopover.update()

getInstance

স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত popover উদাহৰণ পাবলৈ অনুমতি দিয়ে

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance ৰ দ্বাৰা প্ৰস্তুত কৰা হৈছে

স্থিতিশীল পদ্ধতি যি আপোনাক এটা DOM উপাদানৰ সৈতে জড়িত popover উদাহৰণ পাবলৈ অনুমতি দিয়ে, বা এটা নতুন সৃষ্টি কৰক যদি ইয়াক আৰম্ভ কৰা হোৱা নাছিল

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

ইভেন্টসমূহ

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