টোষ্ট

এটা টোষ্ট, এটা লঘু আৰু সহজে কাষ্টমাইজ কৰিব পৰা সতৰ্কবাণী বাৰ্তাৰ সৈতে আপোনাৰ দৰ্শকসকললৈ জাননীসমূহ ঠেলি দিয়ক।

টোষ্ট হৈছে মোবাইল আৰু ডেস্কটপ অপাৰেটিং চিষ্টেমৰ দ্বাৰা জনপ্ৰিয় কৰা পুছ নোটিফিকেচনসমূহৰ অনুকৰণ কৰিবলৈ ডিজাইন কৰা লঘু নোটিফিকেচন। ফ্লেক্সবক্সৰ সৈতে নিৰ্মাণ কৰা হৈছে, গতিকে ইয়াক প্ৰান্তিককৰণ আৰু স্থান দিয়াটো সহজ।

অভাৰভিউ

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

যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰি আছে, ইয়াৰ বাবে প্ৰয়োজনutil.js ।
টোষ্টসমূহ পৰিৱেশনৰ কাৰণে অপ্ট-ইন কৰা হয়, গতিকে আপুনি নিজেই সেইবোৰ আৰম্ভ কৰিব লাগিব ।
অনুগ্ৰহ কৰি মন কৰক যে টোষ্টৰ স্থান নিৰ্ধাৰণৰ বাবে আপুনি দায়বদ্ধ।
টোষ্টসমূহ স্বয়ংক্ৰিয়ভাৱে লুকাই থাকিব যদি আপুনি ধাৰ্য্য নকৰে autohide: false।

এই উপাদানৰ এনিমেচন প্ৰভাৱ prefers-reduced-motionমাধ্যম প্ৰশ্নৰ ওপৰত নিৰ্ভৰশীল। আমাৰ অভিগম্যতা নথিপত্ৰৰ হ্ৰাস কৰা গতি অংশ চাওক ।

উদাহৰণ

প্ৰাথমিক

সম্প্ৰসাৰণযোগ্য আৰু ভৱিষ্যদ্বাণীযোগ্য টোষ্টক উৎসাহিত কৰিবলৈ আমি এটা হেডাৰ আৰু বডিৰ পৰামৰ্শ দিওঁ। টোষ্ট হেডাৰসমূহে ব্যৱহাৰ কৰে display: flex, আমাৰ মাৰ্জিন আৰু ফ্লেক্সবক্স সঁজুলিসমূহৰ বাবে ধন্যবাদৰ বাবে বিষয়বস্তুৰ সহজ প্ৰান্তিককৰণৰ অনুমতি দিয়ে।

টোষ্টসমূহ আপুনি প্ৰয়োজন অনুসৰি নমনীয় আৰু ইয়াৰ প্ৰয়োজনীয় মাৰ্কআপ অতি কম। নূন্যতমভাৱে, আপোনাৰ “টোষ্ট কৰা” বিষয়বস্তু ৰাখিবলৈ আমাক এটা উপাদানৰ প্ৰয়োজন হয় আৰু এটা ডিছমিছ বুটামক তীব্ৰভাৱে উৎসাহিত কৰোঁ।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

জীয়াই থকা

এটা টোষ্ট দেখুৱাবলৈ তলৰ বুটামটো ক্লিক কৰক (আমাৰ সঁজুলিসমূহৰ সৈতে তলৰ সোঁফালৰ চুকত অৱস্থিত) যি অবিকল্পিতভাৱে ৰ সৈতে লুকুৱাই ৰখা হৈছে .hide।

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

অৰ্ধস্বচ্ছ

টোষ্টবোৰ তলত থকাখিনিৰ লগত মিহলি হ’বলৈ অলপ অৰ্ধস্বচ্ছ হয়।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ষ্টেকিং কৰা

যেতিয়া আপোনাৰ একাধিক টোষ্ট থাকে, আমি অবিকল্পিতভাৱে সিহতক পঢ়িব পৰা ধৰণে উলম্বভাৱে ষ্টেক কৰো।

চোৱা? ঠিক এনেকৈয়ে।

হেড আপ, টোষ্ট স্বয়ংক্ৰিয়ভাৱে ষ্টেক হ’ব

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    See? Just like this.
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

প্লেচমেণ্ট

আপুনি প্ৰয়োজন অনুসৰি কাষ্টম CSS ৰ সৈতে টোষ্টসমূহ ৰাখক। ওপৰৰ সোঁফালটো প্ৰায়ে জাননীৰ বাবে ব্যৱহাৰ কৰা হয়, ওপৰৰ মাজৰ অংশটোও ব্যৱহাৰ কৰা হয়। যদি আপুনি কেতিয়াবা এটা এটা টোষ্ট দেখুৱাবলৈ গৈ আছে, তেন্তে পজিচনিং শৈলীসমূহ সঠিকভাৱে ৰাখক .toast।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

অধিক জাননী সৃষ্টি কৰা ব্যৱস্থাপ্ৰণালীসমূহৰ বাবে, এটা ৰেপিং উপাদান ব্যৱহাৰ কৰাৰ কথা বিবেচনা কৰক যাতে সিহঁতে সহজে ষ্টেক কৰিব পাৰে ।

চোৱা? ঠিক এনেকৈয়ে।

হেড আপ, টোষ্ট স্বয়ংক্ৰিয়ভাৱে ষ্টেক হ’ব

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

আপুনি টোষ্টসমূহক অনুভূমিকভাৱে আৰু/বা উলম্বভাৱে প্ৰান্তিককৰণ কৰিবলৈ flexbox সঁজুলিসমূহৰ সৈতেও ফেন্সি পাব পাৰে।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

অভিগম্যতা

টোষ্টসমূহ আপোনাৰ দৰ্শক বা ব্যৱহাৰকাৰীসকলৰ বাবে সৰু সৰু বাধা হিচাপে লোৱা হৈছে, গতিকে স্ক্ৰীণ ৰিডাৰ আৰু অনুৰূপ সহায়ক প্ৰযুক্তি থকাসকলক সহায় কৰিবলৈ, আপুনি আপোনাৰ টোষ্টসমূহ টোষ্টৰ পৰিৱৰ্তে এটা aria-liveঅঞ্চলত মোহাৰিব লাগে। মোহাৰিব লাগে । লাইভ অঞ্চলসমূহলৈ পৰিবৰ্তনসমূহ (যেনে এটা টোষ্ট উপাদান ইনজেকচন কৰা/আপডেট কৰা) ব্যৱহাৰকাৰীৰ ফ'কাচ স্থানান্তৰ কৰাৰ প্ৰয়োজন নোহোৱাকৈ বা অন্যথা ব্যৱহাৰকাৰীক বাধা নিদিয়াকৈ পৰ্দা পাঠকৰ দ্বাৰা স্বয়ংক্ৰিয়ভাৱে ঘোষণা কৰা হয়। অতিৰিক্তভাৱে, aria-atomic="true"কেৱল কি সলনি কৰা হৈছে সেইটো ঘোষণা কৰাৰ পৰিৱৰ্তে, সমগ্ৰ টোষ্টটো সদায় এটা (পাৰমাণৱিক) একক হিচাপে ঘোষণা কৰাটো নিশ্চিত কৰিবলৈ অন্তৰ্ভুক্ত কৰক (যিটোৱে সমস্যাৰ সৃষ্টি কৰিব পাৰে যদি আপুনি কেৱল টোষ্টৰ বিষয়বস্তুৰ এটা অংশ আপডেট কৰে, বা যদি একেটা টোষ্টৰ বিষয়বস্তু প্ৰদৰ্শন কৰে পিছৰ সময়ত)। যদি প্ৰয়োজনীয় তথ্য প্ৰক্ৰিয়াৰ বাবে গুৰুত্বপূৰ্ণ, যেনে এটা প্ৰপত্ৰত ভুলৰ তালিকাৰ বাবে, তেন্তে সতৰ্কতা উপাদান ব্যৱহাৰ কৰক

মন কৰিব যে টোষ্ট সৃষ্টি বা আপডেট কৰাৰ আগতে লাইভ অঞ্চলটো মাৰ্কআপত উপস্থিত থাকিব লাগিব । যদি আপুনি একে সময়তে গতিশীলভাৱে দুয়োটা সৃষ্টি কৰে আৰু পৃষ্ঠাত সিহতক ইনজেকচন কৰে, তেন্তে সাধাৰণতে সহায়ক প্ৰযুক্তিৰ দ্বাৰা সিহতক ঘোষণা কৰা নহ'ব।

আপুনি বিষয়বস্তুৰ ওপৰত নিৰ্ভৰ কৰি roleআৰু স্তৰটোও খাপ খুৱাব লাগিব । aria-liveযদি ই এটা ভুলৰ দৰে এটা গুৰুত্বপূৰ্ণ বাৰ্তা, ব্যৱহাৰ কৰক role="alert" aria-live="assertive", অন্যথা role="status" aria-live="polite"বৈশিষ্ট্যসমূহ ব্যৱহাৰ কৰক।

আপুনি প্ৰদৰ্শন কৰা বিষয়বস্তু সলনি হোৱাৰ লগে লগে, delayসময়সীমা আপডেট কৰাটো নিশ্চিত কৰক যাতে ব্যৱহাৰকাৰীসকলে টোষ্ট পঢ়িবলৈ পৰ্যাপ্ত সময় পায়।

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

ব্যৱহাৰ কৰাৰ সময়ত autohide: false, ব্যৱহাৰকাৰীসকলক টোষ্ট খাৰিজ কৰাৰ অনুমতি দিবলৈ আপুনি এটা বন্ধ বুটাম যোগ কৰিব লাগিব।

নমস্কাৰ, পৃথিৱী! এইটো এটা টোষ্ট বাৰ্তা।

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

কাৰিকৰীভাৱে আপোনাৰ টোষ্টত ফ'কাচযোগ্য/কাৰ্য্যকৰী নিয়ন্ত্ৰণসমূহ (যেনে অতিৰিক্ত বুটাম বা সংযোগসমূহ) যোগ কৰাটো সম্ভৱ হ'লেও, আপুনি স্বয়ংক্ৰিয়ভাৱে লুকাই থকা টোষ্টসমূহৰ বাবে এইটো কৰাটো এৰাই চলিব লাগে। delayআপুনি টোষ্টক এটা দীঘলীয়া সময়সীমা দিলেও , কিবৰ্ড আৰু সহায়ক প্ৰযুক্তি ব্যৱহাৰকাৰীসকলে ব্যৱস্থা ল'বলৈ সময়মতে টোষ্টত উপনীত হোৱাত অসুবিধা পাব পাৰে (যিহেতু টোষ্টসমূহে প্ৰদৰ্শন কৰাৰ সময়ত ফ'কাচ লাভ নকৰে)। যদি আপুনি নিশ্চিতভাৱে অধিক নিয়ন্ত্ৰণ থাকিব লাগিব, আমি ৰ সৈতে এটা টোষ্ট ব্যৱহাৰ কৰাৰ পৰামৰ্শ দিওঁ autohide: false।

জাভাস্ক্রিপ্ট আচৰণ

ব্যৱহাৰ

জাভাস্ক্রিপ্টৰ যোগেদি টোষ্টসমূহ আৰম্ভ কৰক:

$('.toast').toast(option)

বিকল্পসমূহ

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

নাম	প্ৰকাৰ	ডিফল্ট	বিৱৰণ
এনিমেচন	বুলিয়ান	সঁচা	টোষ্টত এটা CSS ফেড ট্ৰেঞ্জিচন প্ৰয়োগ কৰক
অটোহাইড	বুলিয়ান	সঁচা	অটো টোষ্ট লুকুৱাই ৰাখক
পলম কৰা	সংখ্যা	`500`	টোষ্ট লুকুৱাই ৰখাত বিলম্ব (ms)

পদ্ধতিসমূহ

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

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

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

`$().toast(options)`

এটা উপাদান সংগ্ৰহৰ সৈতে এটা টোষ্ট হেণ্ডলাৰ সংলগ্ন কৰে।

`.toast('show')`

এটা উপাদানৰ টোষ্ট প্ৰকাশ কৰে। টোষ্ট প্ৰকৃততে দেখুওৱাৰ আগতে (অৰ্থাৎ ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। shown.bs.toastআপুনি এই পদ্ধতিটো নিজেই কল কৰিব লাগিব, ইয়াৰ পৰিৱৰ্তে আপোনাৰ টোষ্টে দেখুৱাব নোৱাৰে।

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

`.toast('hide')`

এটা উপাদানৰ টোষ্ট লুকুৱাই ৰাখে। টোষ্ট প্ৰকৃততে লুকুৱাই ৰখাৰ আগতে (অৰ্থাৎ ইভেন্টটো ঘটাৰ আগতে) কলাৰলৈ উভতি যায়। hidden.bs.toastআপুনি এই পদ্ধতিক হস্তচালিতভাৱে কল কৰিব লাগিব যদি autohideআপুনি false.

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

`.toast('dispose')`

এটা উপাদানৰ টোষ্ট লুকুৱাই ৰাখে। আপোনাৰ টোষ্টটো DOM ত থাকিব কিন্তু আৰু দেখা নাযায়।

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

ইভেন্টসমূহ

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

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