Source

পপোভারস

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

ওভারভিউ

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

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

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

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

একটি পৃষ্ঠায় সমস্ত পপওভার শুরু করার একটি উপায় হল তাদের 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="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>

ব্যবহার

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

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

অপশন

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

নাম টাইপ ডিফল্ট বর্ণনা
অ্যানিমেশন বুলিয়ান সত্য পপওভারে একটি CSS ফেইড ট্রানজিশন প্রয়োগ করুন
ধারক স্ট্রিং | উপাদান | মিথ্যা মিথ্যা

একটি নির্দিষ্ট উপাদানের সাথে পপওভার যুক্ত করে। উদাহরণ: container: 'body'. এই বিকল্পটি বিশেষভাবে উপযোগী যে এটি আপনাকে নথির প্রবাহে পপওভারকে ট্রিগারিং উপাদানের কাছাকাছি অবস্থান করতে দেয় - যা একটি উইন্ডোর আকার পরিবর্তন করার সময় পপওভারটিকে ট্রিগারিং উপাদান থেকে দূরে ভাসতে বাধা দেবে।

বিষয়বস্তু স্ট্রিং | উপাদান | ফাংশন '

data-contentবৈশিষ্ট্য উপস্থিত না থাকলে ডিফল্ট সামগ্রী মান ।

যদি একটি ফাংশন দেওয়া হয়, এটিকে thisপপওভারটি যে উপাদানটির সাথে সংযুক্ত করা হয়েছে তার রেফারেন্স সেট সহ কল ​​করা হবে।

বিলম্ব সংখ্যা | বস্তু 0

পপওভার (ms) দেখানো এবং লুকানো বিলম্ব - ম্যানুয়াল ট্রিগার প্রকারে প্রযোজ্য নয়

যদি একটি নম্বর সরবরাহ করা হয়, বিলম্ব লুকান/দেখানো উভয় ক্ষেত্রেই প্রয়োগ করা হয়

বস্তুর গঠন হল:delay: { "show": 500, "hide": 100 }

html বুলিয়ান মিথ্যা পপওভারে HTML ঢোকান। মিথ্যা হলে, textDOM-এ বিষয়বস্তু সন্নিবেশ করতে jQuery-এর পদ্ধতি ব্যবহার করা হবে। আপনি যদি XSS আক্রমণ সম্পর্কে চিন্তিত হন তবে পাঠ্য ব্যবহার করুন৷
বসানো স্ট্রিং | ফাংশন 'ঠিক'

কিভাবে পপওভার অবস্থান করতে হয় - অটো | শীর্ষ | নীচে | বাম | অধিকার
যখন autoনির্দিষ্ট করা হয়, এটি গতিশীলভাবে পপওভারকে পুনর্বিন্যাস করবে।

প্লেসমেন্ট নির্ধারণ করতে যখন একটি ফাংশন ব্যবহার করা হয়, তখন এটিকে প্রথম আর্গুমেন্ট হিসাবে পপওভার DOM নোড এবং দ্বিতীয় হিসাবে ট্রিগারিং উপাদান DOM নোডকে বলা হয়। thisপ্রসঙ্গটি পপওভার উদাহরণে সেট করা হয়েছে ।

নির্বাচক স্ট্রিং | মিথ্যা মিথ্যা একটি নির্বাচক প্রদান করা হলে, পপওভার অবজেক্টগুলি নির্দিষ্ট লক্ষ্যগুলিতে অর্পণ করা হবে৷ অনুশীলনে, এটি ডাইনামিক এইচটিএমএল কন্টেন্টকে পপওভার যোগ করতে সক্ষম করতে ব্যবহৃত হয়। এটি এবং একটি তথ্যপূর্ণ উদাহরণ দেখুন ।
টেমপ্লেট স্ট্রিং '<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পপওভারটি যে উপাদানটির সাথে সংযুক্ত করা হয়েছে তার রেফারেন্স সেট সহ কল ​​করা হবে।

ট্রিগার স্ট্রিং 'ক্লিক' কিভাবে পপওভার ট্রিগার হয় - ক্লিক করুন | হোভার | ফোকাস | ম্যানুয়াল আপনি একাধিক ট্রিগার পাস করতে পারেন; একটি স্থান দিয়ে তাদের আলাদা করুন। `ম্যানুয়াল` অন্য কোনো ট্রিগারের সাথে একত্রিত করা যাবে না।
অফসেট সংখ্যা | স্ট্রিং 0 এর টার্গেটের তুলনায় পপওভার অফসেট। আরও তথ্যের জন্য Popper.js এর অফসেট ডক্স দেখুন ।
ফলব্যাক প্লেসমেন্ট স্ট্রিং | অ্যারে 'উল্টানো' পপার ফলব্যাকে কোন অবস্থান ব্যবহার করবে তা নির্দিষ্ট করার অনুমতি দিন। আরও তথ্যের জন্য Popper.js এর আচরণ ডক্স দেখুন
সীমানা স্ট্রিং | উপাদান 'স্ক্রোল প্যারেন্ট' পপওভারের ওভারফ্লো সীমাবদ্ধতা। 'viewport', 'window', 'scrollParent', বা একটি HTMLElement রেফারেন্স (শুধুমাত্র জাভাস্ক্রিপ্ট) এর মান গ্রহণ করে । আরও তথ্যের জন্য Popper.js এর প্রতিরোধ ওভারফ্লো ডক্স দেখুন ।

পৃথক পপোভারের জন্য ডেটা বৈশিষ্ট্য

পৃথক পপোভারের বিকল্পগুলি বিকল্পভাবে ডেটা অ্যাট্রিবিউট ব্যবহারের মাধ্যমে নির্দিষ্ট করা যেতে পারে, যেমন উপরে ব্যাখ্যা করা হয়েছে।

পদ্ধতি

অ্যাসিঙ্ক্রোনাস পদ্ধতি এবং রূপান্তর

সমস্ত API পদ্ধতি অসিঙ্ক্রোনাস এবং একটি রূপান্তর শুরু করে । রূপান্তর শুরু হওয়ার সাথে সাথেই কিন্তু এটি শেষ হওয়ার আগেই তারা কলারের কাছে ফিরে আসে । উপরন্তু, একটি রূপান্তরকারী উপাদানের উপর একটি পদ্ধতি কল উপেক্ষা করা হবে

আরও তথ্যের জন্য আমাদের জাভাস্ক্রিপ্ট ডকুমেন্টেশন দেখুন।

$().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')

ঘটনা

ইভেন্টের ধরণ বর্ণনা
show.bs.popover এই ইভেন্টটি অবিলম্বে ফায়ার করে যখন showইনস্ট্যান্স পদ্ধতিটি কল করা হয়।
দেখানো.বিএস.পপওভার পপওভারটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
hide.bs.popover এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hideউদাহরণ পদ্ধতিটি কল করা হয়।
hidden.bs.popover পপওভার ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয় (সিএসএস রূপান্তর সম্পূর্ণ হওয়ার জন্য অপেক্ষা করবে)।
inserted.bs.popover show.bs.popoverDOM-এ পপওভার টেমপ্লেট যোগ করা হলে ইভেন্টের পরে এই ইভেন্টটি বরখাস্ত করা হয় ।
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})