পপোভারস

ওভারভিউ

পপওভার প্লাগইন ব্যবহার করার সময় যে বিষয়গুলি জানতে হবে:

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

কিছু উদাহরণ সহ পপোভার কীভাবে কাজ করে তা দেখতে পড়তে থাকুন।

উদাহরণ: সর্বত্র পপোভার সক্ষম করুন

একটি পৃষ্ঠায় সমস্ত পপওভার শুরু করার একটি উপায় হল তাদের 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যাতে পপওভারের এইচটিএমএল পরিবর্তে সেই উপাদানটির মধ্যে উপস্থিত হয়।

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>

চার দিক

চারটি বিকল্প উপলব্ধ: উপরে, ডান, নীচে এবং বাম প্রান্তিককৃত। আরটিএল-এ বুটস্ট্র্যাপ ব্যবহার করার সময় দিকনির্দেশ মিরর করা হয়।

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

ব্যবহার

জাভাস্ক্রিপ্টের মাধ্যমে পপওভার সক্ষম করুন:

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

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-bs-, যেমনটি data-bs-animation=""। ডেটা অ্যাট্রিবিউটের মাধ্যমে বিকল্পগুলি পাস করার সময় ক্যামেলকেস থেকে কাবাব-কেসে বিকল্প নামের কেস টাইপ পরিবর্তন করতে ভুলবেন না। উদাহরণস্বরূপ, ব্যবহার করার পরিবর্তে 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ঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়। Popovers যাদের শিরোনাম এবং বিষয়বস্তু উভয়ই শূন্য-দৈর্ঘ্যের হয় তা কখনই প্রদর্শিত হয় না।

myPopover.show()

লুকান

একটি উপাদানের পপওভার লুকিয়ে রাখে। পপওভারটি আসলে লুকানো হওয়ার আগে (অর্থাৎ hidden.bs.popoverঘটনা ঘটার আগে) কলারের কাছে ফিরে আসে। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

myPopover.hide()

টগল

একটি উপাদানের পপওভার টগল করে। পপওভারটি আসলে দেখানো বা লুকানোর আগে (অর্থাৎ ঘটনা ঘটার আগে) কলারের কাছেshown.bs.popover ফিরে আসে hidden.bs.popover। এটি পপওভারের একটি "ম্যানুয়াল" ট্রিগারিং হিসাবে বিবেচিত হয়।

myPopover.toggle()

নিষ্পত্তি

একটি উপাদানের পপওভার লুকিয়ে রাখে এবং ধ্বংস করে (DOM উপাদানে সঞ্চিত ডেটা সরিয়ে দেয়)। ডেলিগেশন ব্যবহার করে পপোভার (যা বিকল্প ব্যবহার করেselector তৈরি করা হয় ) বংশধর ট্রিগার উপাদানগুলিতে পৃথকভাবে ধ্বংস করা যাবে না।

myPopover.dispose()

সক্ষম

একটি উপাদানের পপওভার দেখানোর ক্ষমতা দেয়। Popovers ডিফল্টরূপে সক্রিয় করা হয়.

myPopover.enable()

নিষ্ক্রিয়

একটি উপাদানের পপওভার দেখানোর ক্ষমতা সরিয়ে দেয়। পপওভার শুধুমাত্র দেখাতে সক্ষম হবে যদি এটি পুনরায় সক্রিয় করা হয়।

myPopover.disable()

টগল সক্ষম

একটি উপাদানের পপওভার দেখানো বা লুকানোর ক্ষমতা টগল করে।

myPopover.toggleEnabled()

হালনাগাদ

একটি উপাদানের পপওভারের অবস্থান আপডেট করে।

myPopover.update()

getInstance

স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত পপওভার উদাহরণ পেতে দেয়

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

getOrCreateInstance

স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত পপওভার ইনস্ট্যান্স পেতে দেয়, বা এটি আরম্ভ না হলে একটি নতুন তৈরি করতে দেয়

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