টোস্ট
একটি টোস্ট, একটি হালকা এবং সহজে কাস্টমাইজযোগ্য সতর্কতা বার্তা সহ আপনার দর্শকদের কাছে পুশ বিজ্ঞপ্তিগুলি৷
টোস্টগুলি হল হালকা ওজনের নোটিফিকেশন যা মোবাইল এবং ডেস্কটপ অপারেটিং সিস্টেম দ্বারা জনপ্রিয় করা পুশ বিজ্ঞপ্তিগুলিকে অনুকরণ করার জন্য ডিজাইন করা হয়েছে৷ এগুলি ফ্লেক্সবক্স দিয়ে তৈরি, তাই এগুলি সারিবদ্ধ করা এবং অবস্থান করা সহজ৷
ওভারভিউ
টোস্ট প্লাগইন ব্যবহার করার সময় যা জানা দরকার:
- আপনি যদি উৎস থেকে আমাদের জাভাস্ক্রিপ্ট তৈরি করেন, তাহলে এটির প্রয়োজন
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">×</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">×</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">×</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">×</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">×</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">×</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">×</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">×</span>
</button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
</div>
</div>
</div>
</div>
টোস্টগুলিকে অনুভূমিকভাবে এবং/অথবা উল্লম্বভাবে সারিবদ্ধ করতে আপনি ফ্লেক্সবক্স ইউটিলিটিগুলির সাথে অভিনবও পেতে পারেন।
<!-- 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">×</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">×</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 ইনস্ট্যান্স পদ্ধতিটি কল করা হয়। |
দেখানো.বিএস.টোস্ট | টোস্টটি ব্যবহারকারীর কাছে দৃশ্যমান হয়ে গেলে এই ইভেন্টটি চালু করা হয���। |
hide.bs.toast | এই ইভেন্টটি অবিলম্বে বহিস্কার করা হয় যখন hide উদাহরণ পদ্ধতিটি কল করা হয়। |
hidden.bs.toast | টোস্ট ব্যবহারকারীর কাছ থেকে লুকানো শেষ হলে এই ইভেন্টটি বরখাস্ত করা হয়। |
$('#myToast').on('hidden.bs.toast', function () {
// do something...
})