Notification Component এর ব্যবহার

Bulma ফ্রেমওয়ার্কে Notification Component একটি খুবই সহজ এবং কার্যকরী উপাদান, যা ব্যবহারকারীদের তথ্য বা সতর্কতা প্রদর্শন করতে ব্যবহৃত হয়। এটি সাধারণত পপ-আপ মেসেজ, বার্তা বা কোনো সিস্টেম মেসেজ (যেমন, সাফল্য, ত্রুটি, সতর্কতা ইত্যাদি) দেখানোর জন্য ব্যবহৃত হয়।

১. Notification কম্পোনেন্টের মৌলিক ব্যবহার

Bulma এর Notification কম্পোনেন্টটি একটি সাধারণ ডিভ (div) উপাদান হিসেবে তৈরি হয়। আপনি বিভিন্ন রঙের ক্লাস ব্যবহার করে এই কম্পোনেন্টের বর্ণ পরিবর্তন করতে পারেন, যেমন is-primary, is-success, is-warning, is-danger ইত্যাদি। প্রতিটি রঙ নির্দিষ্ট ধরনের বার্তা বা সতর্কতা প্রকাশ করতে সহায়তা করে।

উদাহরণ: Basic Notification

<div class="notification">
  This is a simple notification message.
</div>

এখানে:

• notification ক্লাসটি ব্যবহার করা হয়েছে যা একটি সাধারণ নোটিফিকেশন বার্তা তৈরি করবে।

২. Notification এর রঙ পরিবর্তন করা

Bulma এ বিভিন্ন ধরনের রঙের ক্লাস ব্যবহার করে আপনি Notification কম্পোনেন্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে পারেন। প্রতিটি রঙ ক্লাস একটি নির্দিষ্ট ধরনের বার্তা বা সতর্কতার প্রতিনিধিত্ব করে।

রঙের ক্লাসসমূহ:

• is-primary: সাধারণ বা প্রাথমিক বার্তা
• is-link: লিংক সম্পর্কিত বার্তা
• is-info: তথ্য সংক্রান্ত বার্তা
• is-success: সফলতা বা সফল বার্তা
• is-warning: সতর্কতা বার্তা
• is-danger: বিপদ বা ত্রুটি বার্তা

উদাহরণ: Notification এর রঙ পরিবর্তন

<div class="notification is-primary">
  This is a primary notification message.
</div>

<div class="notification is-success">
  Your operation was successful!
</div>

<div class="notification is-danger">
  Something went wrong. Please try again.
</div>

এখানে:

• is-primary ক্লাসটি একটি প্রাথমিক বার্তা তৈরি করেছে।
• is-success ক্লাসটি সফলতার বার্তা তৈরি করেছে।
• is-danger ক্লাসটি ত্রুটি বার্তা তৈরি করেছে।

৩. Notification এ আইকন যোগ করা

Bulma Notification কম্পোনেন্টে আপনি সহজেই আইকন যোগ করতে পারেন। এর জন্য Font Awesome বা অন্য কোনো আইকন লাইব্রেরি ব্যবহার করা যেতে পারে। Bulma নিজেই কিছু সাধারণ আইকন প্রদান করে, যেমন fa ক্লাস।

উদাহরণ: Notification এ আইকন যোগ করা

<div class="notification is-info">
  <button class="delete"></button>
  <span class="icon is-small">
    <i class="fas fa-info-circle"></i>
  </span>
  This is an informational notification with an icon.
</div>

এখানে:

• span এবং icon is-small ক্লাসটি আইকনটি ছোট আকারে প্রদর্শন করতে ব্যবহৃত হয়েছে।
• fas fa-info-circle Font Awesome আইকন ক্লাস যা ইন্সটল বা লোড করা থাকতে হবে।

৪. Notification এ Delete বাটন

Bulma Notification কম্পোনেন্টে একটি ডিফল্ট Delete button থাকে যা ব্যবহারকারীকে নোটিফিকেশনটি বন্ধ করার সুযোগ দেয়। delete ক্লাসটি একটি ছোট ক্রস আইকন হিসেবে প্রদর্শিত হয়, যা ক্লিক করলে নোটিফিকেশনটি অদৃশ্য হয়ে যায়।

উদাহরণ: Delete Button সহ Notification

<div class="notification is-warning">
  <button class="delete"></button>
  This is a warning notification with a delete button.
</div>

এখানে:

• delete ক্লাসটি একটি বন্ধ (ক্রস) বাটন তৈরি করে যা ব্যবহারকারীকে নোটিফিকেশনটি বন্ধ করার সুযোগ দেয়।

৫. Multiple Notifications ব্যবহার

Bulma এ আপনি একাধিক Notification একে অপরের পর পর প্রদর্শন করতে পারেন। এই জন্য প্রতিটি Notification কে আলাদা <div> ট্যাগে রাখতে হবে।

উদাহরণ: একাধিক Notification

<div class="notification is-success">
  Your form was submitted successfully.
</div>

<div class="notification is-danger">
  There was an error submitting your form.
</div>

<div class="notification is-warning">
  Please fill in all required fields.
</div>

এখানে:

• একাধিক Notification তৈরি করা হয়েছে যেখানে সফলতা, ত্রুটি এবং সতর্কতার বার্তা আলাদাভাবে প্রদর্শিত হচ্ছে।

৬. Notification এর পজিশন এবং অ্যাডভান্সড কাস্টমাইজেশন

Bulma দিয়ে আপনি Notification কম্পোনেন্টের পজিশন কাস্টমাইজ করতে পারেন, যেমন এটি পৃষ্ঠার উপরে বা নিচে স্থাপন করা। এছাড়া আপনি CSS ব্যবহার করে Notification এর স্টাইলিং আরও কাস্টমাইজ করতে পারেন।

উদাহরণ: Notification এর পজিশন কাস্টমাইজ করা

<div class="notification is-info" style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
  This is a fixed position notification!
</div>

এখানে:

• CSS এর position: fixed; top: 20px; right: 20px; স্টাইল ব্যবহার করে Notification টি স্ক্রীনের উপরের ডানদিকে স্থাপন করা হয়েছে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Notification কম্পোনেন্ট ব্যবহার করা সহজ এবং কার্যকরী। এটি বিভিন্ন রঙ এবং আইকন যোগ করার মাধ্যমে সতর্কতা, সফলতা, ত্রুটি, বা সাধারণ তথ্য প্রদর্শন করতে সহায়তা করে। এছাড়া, Delete button সহ এটি ব্যবহারকারীদের জন্য আরও ইন্টারেক্টিভ হতে পারে। Bulma এর সিম্পল এবং রেসপনসিভ ডিজাইন এই Notification কম্পোনেন্টকে দ্রুত এবং কার্যকরীভাবে ব্যবহারযোগ্য করে তোলে।