পপোভারস

ওভারভিউ

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

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

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

উদাহরণ

পপওভার সক্ষম করুন

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

সরাসরি নমুনা

নিম্নলিখিত লাইভ পপওভার রেন্ডার করতে আমরা উপরের স্নিপেটের মতো জাভাস্ক্রিপ্ট ব্যবহার করি। শিরোনাম এর মাধ্যমে সেট করা হয় data-bs-titleএবং শরীরের বিষয়বস্তু এর মাধ্যমে সেট করা হয় data-bs-content।

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

চার দিক

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

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

কাস্টমcontainer

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

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

আরেকটি পরিস্থিতি যেখানে আপনি একটি সুস্পষ্ট কাস্টম সেট করতে চান তা হল একটি মডেল ডায়ালগেরcontainer ভিতরে পপওভার , যাতে নিশ্চিত করা যায় যে পপওভারটি নিজেই মোডেল যুক্ত হয়েছে। এটি বিশেষ করে পপোভারের জন্য গুরুত্বপূর্ণ যেগুলিতে ইন্টারেক্টিভ উপাদান রয়েছে - মডেল ডায়ালগগুলি ফোকাসকে আটকে রাখবে, তাই পপওভারটি মডেলের একটি শিশু উপাদান না হলে, ব্যবহারকারীরা এই ইন্টারেক্টিভ উপাদানগুলিকে ফোকাস করতে বা সক্রিয় করতে সক্ষম হবেন না৷

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

কাস্টম popovers

আপনি CSS ভেরিয়েবল ব্যবহার করে পপোভারের চেহারা কাস্টমাইজ করতে পারেন । data-bs-custom-class="custom-popover"আমরা আমাদের কাস্টম উপস্থিতির সুযোগের জন্য একটি কাস্টম ক্লাস সেট করি এবং কিছু স্থানীয় CSS ভেরিয়েবল ওভাররাইড করতে এটি ব্যবহার করি।

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</button>

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

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

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

const popover = new bootstrap.Popover('.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>

সিএসএস

ভেরিয়েবল

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, পপোভারগুলি এখন .popoverউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass ভেরিয়েবল

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

ব্যবহার

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

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

অপশন

যেহেতু বিকল্পগুলি ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যমে পাস করা যেতে পারে, আপনি তে একটি বিকল্প নাম যুক্ত করতে data-bs-পারেন data-bs-animation="{value}"। ডেটা অ্যাট্রিবিউটের মাধ্যমে বিকল্পগুলি পাস করার সময় বিকল্পের নামটির কেস টাইপ " camelCase " থেকে " kebab-case " এ পরিবর্তন করা নিশ্চিত করুন। উদাহরণস্বরূপ, data-bs-custom-class="beautifier"এর পরিবর্তে ব্যবহার করুন data-bs-customClass="beautifier"।

বুটস্ট্র্যাপ 5.2.0 অনুসারে, সমস্ত উপাদান একটি পরীক্ষামূলক সংরক্ষিত ডেটা অ্যাট্রিবিউটকে সমর্থন করে data-bs-configযা একটি JSON স্ট্রিং হিসাবে সাধারণ উপাদান কনফিগারেশন রাখতে পারে। যখন একটি উপাদান data-bs-config='{"delay":0, "title":123}'এবং data-bs-title="456"বৈশিষ্ট্য থাকে, চূড়ান্ত titleমান হবে 456এবং পৃথক ডেটা বৈশিষ্ট্যগুলি তে দেওয়া মানগুলিকে ওভাররাইড করবে data-bs-config৷ উপরন্তু, বিদ্যমান ডেটা বৈশিষ্ট্যগুলি যেমন JSON মান রাখতে সক্ষম data-bs-delay='{"show":0,"hide":150}'।

সঙ্গে ফাংশন ব্যবহার করেpopperConfig

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

পদ্ধতি

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

ঘটনা

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