Source

টোষ্ট

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

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

অভাৰভিউ

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

  • যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰি আছে, ইয়াৰ বাবে প্ৰয়োজন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>

অৰ্ধস্বচ্ছ

টোষ্টবোৰো অলপ অৰ্ধস্বচ্ছ হয়, গতিকে যিটোৰ ওপৰত দেখা দিব পাৰে তাৰ ওপৰত ইহঁতে মিহলি হৈ পৰে। CSS বৈশিষ্ট্য সমৰ্থন কৰা ব্ৰাউজাৰসমূহৰ বাবে backdrop-filter, আমি এটা টোষ্টৰ তলত উপাদানসমূহ অস্পষ্ট কৰিবলৈও চেষ্টা কৰিম।

<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="min-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>

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

ব্যৱহাৰ

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

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

বিকল্পসমূহ

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

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

পদ্ধতিসমূহ

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

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

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

$().toast(options)

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

.toast('show')

Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.

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

.toast('hide')

Hides an element’s toast. Returns to the caller before the toast has actually been hidden (i.e. before the hidden.bs.toast event occurs). You have to manually call this method if you made autohide to false.

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

.toast('dispose')

Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore.

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

Events

Event Type Description
show.bs.toast This event fires immediately when the show instance method is called.
shown.bs.toast This event is fired when the toast has been made visible to the user.
hide.bs.toast এই ইভেন্ট তৎক্ষণাত ফায়াৰ কৰা হয় যেতিয়া hideইনষ্টেন্স পদ্ধতি কল কৰা হয়।
লুকাই থকা.bs.toast এই ইভেন্টটো যেতিয়া ব্যৱহাৰকাৰীৰ পৰা টোষ্ট লুকুৱাই ৰখাটো শেষ হয় তেতিয়াই গুলিয়াই দিয়া হয়। 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})