Popovers

আপোনাৰ চাইটৰ যিকোনো উপাদানত iOS ত পোৱাৰ দৰে Bootstrap popovers যোগ কৰাৰ বাবে দস্তাবেজ আৰু উদাহৰণসমূহ।

অভাৰভিউ

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

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

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

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

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

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

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

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

$(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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

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

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

ডিছমিছ-অন-নেক্সট-ক্লিকৰ বাবে নিৰ্দিষ্ট মাৰ্কআপৰ প্ৰয়োজন

সঠিক ক্ৰছ-ব্ৰাউজাৰ আৰু ক্ৰছ-প্লেটফৰ্ম আচৰণৰ বাবে, আপুনি টেগ ব্যৱহাৰ কৰিব লাগিব, <a>টেগ নহয় , আৰু আপুনি এটা বৈশিষ্ট্যও <button>অন্তৰ্ভুক্ত কৰিব লাগিব ।tabindex

ডিচমিচিবল পপঅভাৰ

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

ব্যৱহাৰ

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

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

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-animation="".

নাম	প্ৰকাৰ	ডিফল্ট	বিৱৰণ
এনিমেচন	বুলিয়ান	সঁচা	পপঅভাৰত এটা CSS ফেড পৰিৱৰ্তন প্ৰয়োগ কৰক
পাত্ৰ	ষ্ট্ৰিং \| উপাদান \| মিছা	মিছা	এটা নিৰ্দিষ্ট উপাদানৰ সৈতে পপঅভাৰ সংযোজন কৰে। উদাহৰণ: `container: 'body'`. এই বিকল্প বিশেষভাৱে উপযোগী কাৰণ ই আপোনাক ট্ৰিগাৰিং উপাদানৰ ওচৰত দস্তাবেজৰ প্ৰবাহত পপঅভাৰক অৱস্থান কৰাৰ অনুমতি দিয়ে - যি এটা উইন্ডো আকাৰ সলনি কৰাৰ সময়ত পপঅভাৰক ট্ৰিগাৰিং উপাদানৰ পৰা আঁতৰত ওপঙি থকাত বাধা দিব।
বিষয়	ষ্ট্ৰিং \| উপাদান \| অনুষ্ঠান	''	`data-content`বৈশিষ্ট্য উপস্থিত নাথাকিলে অবিকল্পিত বিষয়বস্তু মান । `this`যদি এটা ফাংচন দিয়া হয়, তেন্তে ইয়াক পপঅভাৰ সংযুক্ত উপাদানটোৰ সৈতে ইয়াৰ ৰেফাৰেন্স ছেট কৰি কল কৰা হ’ব ।
পলম কৰা	সংখ্যা \| বস্তু	০	popover দেখুৱা আৰু লুকুৱাবলৈ বিলম্ব (ms) - হস্তচালিত ট্ৰিগাৰ ধৰণৰ বাবে প্ৰযোজ্য নহয় যদি এটা নম্বৰ যোগান ধৰা হয়, তেন্তে লুকুৱাই/দেখা দুয়োটাতে বিলম্ব প্ৰয়োগ কৰা হয় বস্তুৰ গঠন হ'ল:`delay: { "show": 500, "hide": 100 }`
html	বুলিয়ান	মিছা	পপঅভাৰত HTML সন্নিৱিষ্ট কৰক। যদি মিছা, jQuery ৰ `text`পদ্ধতি DOM ত বিষয়বস্তু সন্নিৱিষ্ট কৰিবলে ব্যৱহাৰ কৰা হব। XSS আক্ৰমণৰ বাবে চিন্তিত হ'লে লিখা ব্যৱহাৰ কৰক।
প্লেচমেণ্ট	ষ্ট্ৰিং \| অনুষ্ঠান	'শুদ্ধ'	popover - অটো কেনেকৈ পজিচন কৰিব \| শীৰ্ষ \| তলৰ \| বাওঁফালে \| শুদ্ধ. যেতিয়া `auto`ধাৰ্য্য কৰা হয়, ই গতিশীলভাৱে পপঅভাৰক পুনৰ অৱস্থান কৰিব। যেতিয়া এটা ফাংচন স্থাপন নিৰ্ধাৰণ কৰিবলে ব্যৱহাৰ কৰা হয়, ইয়াক পপঅভাৰ DOM ন'ডক ইয়াৰ প্ৰথম যুক্তি হিচাপে আৰু ট্ৰিগাৰিং উপাদান DOM ন'ডক ইয়াৰ দ্বিতীয় হিচাপে লৈ কল কৰা হয়। `this`প্ৰসংগটো popover উদাহৰণলৈ সংহতি কৰা হৈছে ।
নিৰ্বাচক	ষ্ট্ৰিং \| মিছা	মিছা	যদি এটা নিৰ্বাচক প্ৰদান কৰা হয়, পপঅভাৰ বস্তুসমূহক ধাৰ্য্য কৰা লক্ষ্যসমূহলে প্ৰত্যায়িত কৰা হব। কাৰ্য্যক্ষেত্ৰত, ইয়াক গতিশীল HTML বিষয়বস্তু সামৰ্থবান কৰিবলৈ ব্যৱহাৰ কৰা হয় যাতে পপঅভাৰসমূহ যোগ কৰা হয়। এইটো আৰু এটা তথ্যসমৃদ্ধ উদাহৰণ চাওক ।
সাঁচ	তাঁৰ	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	পপঅভাৰ সৃষ্টি কৰাৰ সময়ত ব্যৱহাৰ কৰিবলৈ HTML ভিত্তি কৰক। পোপঅভাৰৰ `title`বেজী দিয়া হ'ব `.popover-header`৷ পোপঅভাৰৰ `content`বেজী দিয়া হ'ব `.popover-body`৷ `.arrow`পপঅভাৰৰ কাঁড় হৈ পৰিব। আটাইতকৈ বাহিৰৰ ৰেপাৰ উপাদানটোৰ `.popover`শ্ৰেণীটো থাকিব লাগে।
অলপ	ষ্ট্ৰিং \| উপাদান \| অনুষ্ঠান	''	`title`বৈশিষ্ট্য উপস্থিত নাথাকিলে অবিকল্পিত শিৰোনাম মান । `this`যদি এটা ফাংচন দিয়া হয়, তেন্তে ইয়াক পপঅভাৰ সংযুক্ত উপাদানটোৰ সৈতে ইয়াৰ ৰেফাৰেন্স ছেট কৰি কল কৰা হ’ব ।
ট্ৰিগাৰ	তাঁৰ	'ক্লিক'	popover কেনেকৈ ট্ৰিগাৰ হয় - ক্লিক কৰক \| hover \| ফোকাচ \| হাতপুথি. আপুনি একাধিক ট্ৰিগাৰ পাছ কৰিব পাৰে; ইহঁতক এটা স্থান দি পৃথক কৰক। `manual`আন কোনো ট্ৰিগাৰৰ সৈতে সংযুক্ত কৰিব নোৱাৰি।
অফছেট	সংখ্যা \| তাঁৰ	০	ইয়াৰ লক্ষ্যৰ তুলনাত পপঅভাৰৰ অফছেট। অধিক তথ্যৰ বাবে Popper.js ৰ অফছেট নথিপত্ৰ চাওক ।
fallbackপ্লেচমেন্ট	ষ্ট্ৰিং \| এৰে	'ওলোটা কৰা'	ফ'লবেকত পপাৰে কোনটো অৱস্থান ব্যৱহাৰ কৰিব সেইটো নিৰ্দিষ্ট কৰিবলৈ অনুমতি দিয়ক। অধিক তথ্যৰ বাবে Popper.js ৰ আচৰণ নথিপত্ৰসমূহ চাওক
সীমা	ষ্ট্ৰিং \| উপাদান	'scrollParent'	পপঅভাৰৰ অভাৰফ্ল' বাধা সীমা। `'viewport'`, `'window'`, `'scrollParent'`, বা এটা HTMLElement প্ৰসংগ (কেৱল জাভাস্ক্রিপ্ট) ৰ মানসমূহ গ্ৰহণ কৰে । অধিক তথ্যৰ বাবে Popper.js ৰ preventOverflow docs চাওক ।

ব্যক্তিগত পপঅভাৰৰ বাবে তথ্য বৈশিষ্ট্যসমূহ

ব্যক্তিগত পপঅভাৰৰ বাবে বিকল্পসমূহ বিকল্পভাৱে তথ্য বৈশিষ্ট্যসমূহৰ ব্যৱহাৰৰ যোগেদি ধাৰ্য্য কৰিব পাৰি, ওপৰত ব্যাখ্যা কৰা ধৰণে।

পদ্ধতিসমূহ

এচিংক্ৰ’নাছ পদ্ধতি আৰু পৰিৱৰ্তন

সকলো API পদ্ধতি এচিনক্ৰ'নাছ আৰু এটা পৰিৱৰ্তন আৰম্ভ কৰে । ট্ৰেঞ্জিচন আৰম্ভ হোৱাৰ লগে লগে কিন্তু শেষ হোৱাৰ আগতেই তেওঁলোকে কল কৰাজনৰ ওচৰলৈ উভতি যায় ৷ ইয়াৰ উপৰিও, এটা পৰিৱৰ্তনশীল উপাদানত এটা পদ্ধতি কল আওকাণ কৰা হ'ব ।

অধিক তথ্যৰ বাবে আমাৰ জাভাস্ক্রিপ্ট নথিপত্ৰ চাওক।

`$().popover(options)`

এটা উপাদান সংগ্ৰহৰ বাবে popovers আৰম্ভ কৰে।

`.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')

ইভেন্টসমূহ

ইভেন্টৰ ধৰণ	বিৱৰণ
show.bs.popover	এই ইভেন্ট তৎক্ষণাত ফায়াৰ হয় যেতিয়া `show`ইনষ্টেন্স পদ্ধতি কল কৰা হয়।
দেখুওৱা হৈছে.bs.popover	এই ইভেন্টটো ফায়াৰ কৰা হয় যেতিয়া পপঅভাৰ ব্যৱহাৰকাৰীৰ বাবে দৃশ্যমান কৰা হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হোৱালৈ অপেক্ষা কৰিব)।
লুকুৱাওক.bs.popover	এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া `hide`ইনষ্টেন্স পদ্ধতি কল কৰা হয়।
লুকাই থকা.bs.popover	এই ইভেন্টটো গুলিয়াই দিয়া হয় যেতিয়া পপঅভাৰ ব্যৱহাৰকাৰীৰ পৰা লুকুৱাই ৰখাটো শেষ হয় (CSS পৰিৱৰ্তনসমূহ সম্পূৰ্ণ হ'বলৈ অপেক্ষা কৰিব)।
সন্নিৱিষ্ট কৰা হৈছে.bs.popover	এই ইভেন্টক ইভেন্টৰ পিছত গুলিয়াই দিয়া হয় `show.bs.popover`যেতিয়া popover সাঁচ DOM ত যোগ কৰা হয়।

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