পপোভারস

বুটস্ট্র্যাপ পপওভার যোগ করার জন্য ডকুমেন্টেশন এবং উদাহরণ, যেমন iOS-এ পাওয়া যায়, আপনার সাইটের যেকোনো উপাদানে।

ওভারভিউ

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

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

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

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

একটি পৃষ্ঠায় সমস্ত পপওভার শুরু করার একটি উপায় হল তাদের data-toggleবৈশিষ্ট্য অনুসারে তাদের নির্বাচন করা:

$(function () {
  $('[data-toggle="popover"]').popover()
})

উদাহরণ: containerবিকল্পটি ব্যবহার করা

যখন আপনার একটি প্যারেন্ট এলিমেন্টে কিছু স্টাইল থাকে যা একটি পপওভারে হস্তক্ষেপ করে, আপনি একটি কাস্টম নির্দিষ্ট করতে চাইবেন containerযাতে পপওভারের এইচটিএমএল পরিবর্তে সেই উপাদানটির মধ্যে উপস্থিত হয়।

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

উদাহরণ

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-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-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

পরবর্তী ক্লিকে খারিজ করুন

focusটগল এলিমেন্টের চেয়ে ভিন্ন এলিমেন্টের ব্যবহারকারীর পরবর্তী ক্লিকে পপওভার খারিজ করতে ট্রিগার ব্যবহার করুন ।

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

$('.popover-dismiss').popover({
  trigger: 'focus'
})

অক্ষম উপাদান

অ্যাট্রিবিউট সহ উপাদানগুলি disabledইন্টারেক্টিভ নয়, যার অর্থ ব্যবহারকারীরা একটি পপওভার (বা টুলটিপ) ট্রিগার করতে সেগুলিকে ঘোরাতে বা ক্লিক করতে পারে না। একটি সমাধান হিসাবে, আপনি একটি মোড়ক থেকে পপওভার ট্রিগার করতে চান <div>বা অক্ষম উপাদানটির উপর <span>ওভাররাইড করতে চান৷pointer-events

অক্ষম পপওভার ট্রিগারগুলির জন্য, আপনি পছন্দ করতে পারেন data-trigger="hover"যাতে পপওভারটি আপনার ব্যবহারকারীদের কাছে তাত্ক্ষণিক ভিজ্যুয়াল প্রতিক্রিয়া হিসাবে উপস্থিত হয় কারণ তারা একটি অক্ষম উপাদানে ক্লিক করার আশা নাও করতে পারে৷

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ব্যবহার

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

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

অপশন

বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে। ডেটা অ্যাট্রিবিউটের জন্য, বিকল্পের নাম যোগ করুন data-, যেমনটি data-animation=""।

পদ্ধতি

$().popover(options)

একটি উপাদান সংগ্রহের জন্য পপওভার শুরু করে।

.popover('show')

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

$('#element').popover('show')

.popover('hide')

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

$('#element').popover('hide')

.popover('toggle')

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

$('#element').popover('toggle')

.popover('dispose')

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

$('#element').popover('dispose')

.popover('enable')

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

$('#element').popover('enable')

.popover('disable')

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

$('#element').popover('disable')

.popover('toggleEnabled')

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

$('#element').popover('toggleEnabled')

.popover('update')

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

$('#element').popover('update')

ঘটনা

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})