Bulma এর Notification এবং Message Components

Bulma ফ্রেমওয়ার্কে Notification এবং Message কম্পোনেন্টগুলি ব্যবহারকারীর জন্য গুরুত্বপূর্ণ তথ্য বা সতর্কতা প্রদর্শন করতে ব্যবহৃত হয়। এই কম্পোনেন্টগুলো সাধারণত ওয়েবসাইটের বিভিন্ন অংশে, যেমন ফর্ম সাবমিশন, লগইন সমস্যা, সফল কার্যক্রম বা ত্রুটির বার্তা দেখানোর জন্য ব্যবহৃত হয়। Bulma এর Notification এবং Message কম্পোনেন্টগুলো সুন্দরভাবে স্টাইল করা এবং কাস্টমাইজ করা যায়, যা আপনার ওয়েব পেজের ইউজার ইন্টারফেসকে আরও আকর্ষণীয় করে তোলে।

১. Notification Component

Bulma এর Notification কম্পোনেন্টটি একটি সিম্পল এবং ক্লিয়ার বার্তা প্রদর্শন করতে ব্যবহৃত হয়। সাধারণত এটি কোনো সতর্কবার্তা বা ইনফরমেশন শেয়ার করতে ব্যবহার হয়। Notification কে সাধারণত বিভিন্ন ধরনের রঙের মাধ্যমে শ্রেণীভুক্ত করা হয়, যেমন সাফল্য, সতর্কতা, ত্রুটি ইত্যাদি।

বেসিক Notification উদাহরণ:

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

এখানে:

• notification: এটি একটি সাধারণ notification কন্টেইনার।
• delete: এটি একটি বাটন যা ক্লিক করলে notification বন্ধ হয়ে যায়।

Notification এর রঙ কাস্টমাইজেশন:

Bulma তে আপনি বিভিন্ন রঙের Notification ব্যবহার করতে পারেন, যেমন is-primary, is-info, is-success, is-warning, এবং is-danger।

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

<div class="notification is-success">
  <button class="delete"></button>
  This is a success notification message.
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  This is a danger notification message.
</div>

এখানে:

• is-primary: এটি মূল (primary) রঙের notification।
• is-success: এটি সফল (success) রঙের notification।
• is-danger: এটি ত্রুটির (danger) notification।

২. Message Component

Bulma এর Message কম্পোনেন্টটি notification এর তুলনায় একটু বেশি স্টাইলযুক্ত এবং এতে সাধারণত আরও বিস্তারিত তথ্য থাকতে পারে। Message কম্পোনেন্টে সাধারণত শিরোনাম এবং কন্টেন্ট থাকে, এবং এটি সাধারণত কোনো ইনফরমেশন বা সতর্কতার জন্য ব্যবহৃত হয়।

বেসিক Message উদাহরণ:

<article class="message">
  <div class="message-header">
    <p>Important Message</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    This is an important message with detailed information.
  </div>
</article>

এখানে:

• message: এটি একটি সাধারণ message কন্টেইনার।
• message-header: message এর শিরোনাম অংশ।
• message-body: message এর মূল কন্টেন্ট অংশ।
• delete: এটি একটি বাটন যা ক্লিক করলে message বন্ধ হয়ে যায়।

Message এর রঙ কাস্টমাইজেশন:

Message কম্পোনেন্টেও বিভিন্ন রঙের স্টাইল যোগ করা যায়। এটি Notification এর মতো একই রঙ ব্যবহারের সুযোগ দেয়।

<article class="message is-info">
  <div class="message-header">
    <p>Information</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    This is an info message.
  </div>
</article>

<article class="message is-warning">
  <div class="message-header">
    <p>Warning</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    This is a warning message.
  </div>
</article>

<article class="message is-danger">
  <div class="message-header">
    <p>Error</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    This is a danger message indicating an error.
  </div>
</article>

এখানে:

• is-info: ইনফরমেশন বার্তা।
• is-warning: সতর্কতার বার্তা।
• is-danger: ত্রুটি বা বিপদের বার্তা।

৩. Message এবং Notification এর মধ্যে পার্থক্য

Notification এবং Message উভয়ই ইউজারকে বার্তা প্রদর্শন করতে ব্যবহৃত হয়, তবে তাদের মধ্যে কিছু মৌলিক পার্থক্য রয়েছে:

• Notification: সাধারণত ছোট, সরল এবং সোজাসুজি বার্তা প্রদর্শন করে। এটি সাধারণত এক লাইন বার্তা দিয়ে ব্যবহার করা হয় এবং এতে কোনো শিরোনাম থাকে না।
• Message: এটি একটু বিস্তারিত এবং স্টাইলযুক্ত বার্তা। এতে সাধারণত শিরোনাম এবং কন্টেন্ট আলাদা করা থাকে, যা বার্তাটিকে আরও স্পষ্ট করে তোলে।

৪. Notification এবং Message এর ব্যবহার ক্ষেত্রে উদাহরণ

ফর্ম সাবমিশনের পর সাফল্য বার্তা:

<div class="notification is-success">
  <button class="delete"></button>
  Your form has been successfully submitted.
</div>

ইনফরমেশন বা সতর্কতা বার্তা:

<article class="message is-warning">
  <div class="message-header">
    <p>Warning</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    Your session is about to expire.
  </div>
</article>

ত্রুটি বা সমস্যার বার্তা:

<article class="message is-danger">
  <div class="message-header">
    <p>Error</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    There was an error while submitting your form. Please try again.
  </div>
</article>

৫. Responsive Design এবং Notification / Message

Bulma এর Notification এবং Message কম্পোনেন্টগুলো রেসপনসিভ (responsive) হওয়ার সুবিধা প্রদান করে। ছোট স্ক্রীনে এই কম্পোনেন্টগুলো অটো সজ্জিত হয় এবং এটি ওয়েবসাইটের মোবাইল ফ্রেন্ডলি ডিজাইন নিশ্চিত করে।

সারাংশ

Bulma এর Notification এবং Message কম্পোনেন্টগুলি সহজে কাস্টমাইজ করা যায় এবং ওয়েবসাইটে প্রয়োজনীয় ইনফরমেশন, সতর্কতা বা ত্রুটির বার্তা প্রদর্শন করতে সহায়তা করে। Notification কম্পোনেন্টটি সাধারণত ছোট এবং সরল বার্তা প্রদর্শন করতে ব্যবহৃত হয়, আর Message কম্পোনেন্টটি একটু বেশি স্টাইল এবং বিস্তারিত বার্তা প্রদর্শন করতে ব্যবহৃত হয়। Bulma এর এই কম্পোনেন্টগুলো আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও কার্যকরী এবং আকর্ষণীয় করে তোলে।

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 কম্পোনেন্টকে দ্রুত এবং কার্যকরীভাবে ব্যবহারযোগ্য করে তোলে।

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

১. Notification Colors (নোটিফিকেশন রঙ)

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

মূল রঙগুলো:

• is-primary: প্রধান (informative) বার্তা বা মেসেজ।
• is-link: লিঙ্ক সম্পর্কিত বা তথ্যমূলক বার্তা।
• is-success: সফলতা বা সফল বার্তা।
• is-warning: সতর্কতা বা উইন্ডোর সতর্ক বার্তা।
• is-danger: ত্রুটি বা সমস্যা সম্পর্কিত বার্তা।
• is-info: সাধারণ তথ্যপূর্ণ বার্তা।

উদাহরণ:

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

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

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

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

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

<div class="notification is-info">
  This is an info notification.
</div>

এখানে:

• is-primary: সাধারণ বা প্রাথমিক তথ্য বোঝাতে ব্যবহৃত হয়।
• is-success: সফলতা বা কাজ সঠিকভাবে সম্পন্ন হয়েছে এমন বার্তা।
• is-danger: কোনো সমস্যা বা ত্রুটি সম্পর্কিত বার্তা।
• is-warning: কোনো বিপদ বা সতর্কতা সম্পর্কিত বার্তা।

২. Dismissable Notifications (Dismissable Notification এর ব্যবহার)

Bulma-তে আপনি Dismissable Notifications তৈরি করতে পারেন, যা ব্যবহারকারী সহজেই বন্ধ করতে পারেন। এটি সাধারণত Close (x) বাটন ব্যবহার করে সম্পন্ন হয়।

উদাহরণ: Dismissable Notification

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

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

এখানে:

• button class="delete": এই বাটনটি ব্যবহারকারীকে নোটিফিকেশন বন্ধ করার সুযোগ দেয়। delete ক্লাসটি Bulma দ্বারা স্বয়ংক্রিয়ভাবে নোটিফিকেশন বন্ধ করার ফাংশনালিটি প্রদান করে।

৩. Dismissable Notification Example with Custom Message (কাস্টম মেসেজ সহ ডিসমিসেবল নোটিফিকেশন)

নিচে একটি উদাহরণ দেওয়া হল, যেখানে is-danger এবং is-warning রঙের ডিসমিসেবল নোটিফিকেশন রয়েছে।

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

<div class="notification is-warning">
  <button class="delete"></button>
  Warning! Please check your input before submitting.
</div>

এখানে:

• is-danger: ত্রুটি বা সমস্যা সম্পর্কিত বার্তা।
• is-warning: সতর্কবার্তা, যা ব্যবহারকারীকে কিছু বিষয়ে সাবধান থাকতে বলে।

৪. Dismissable Notification with Icon (আইকন সহ ডিসমিসেবল নোটিফিকেশন)

Bulma-তে আপনি Dismissable Notifications এর সাথে আইকনও ব্যবহার করতে পারেন। এতে বার্তাগুলোর গুরুত্ব এবং ধরন আরও স্পষ্টভাবে প্রকাশ পায়। সাধারণত Font Awesome বা অন্য কোন আইকন লাইব্রেরি ব্যবহার করে আইকন যোগ করা হয়।

উদাহরণ: Dismissable Notification with Icon

<div class="notification is-danger">
  <button class="delete"></button>
  <i class="fas fa-exclamation-triangle"></i> Something went wrong. Please try again later.
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  <i class="fas fa-exclamation-circle"></i> Warning! Please check your input before submitting.
</div>

এখানে:

• fas fa-exclamation-triangle: এটি একটি ত্রুটি বা বিপদের আইকন।
• fas fa-exclamation-circle: এটি একটি সতর্কতার আইকন।

৫. Notification with Links (লিঙ্ক সহ নোটিফিকেশন)

Bulma-তে নোটিফিকেশনে আপনি লিঙ্কও যোগ করতে পারেন, যা ইউজারের জন্য অ্যাকশন গ্রহণের সুযোগ দেয়। এটি সাধারণত তথ্য বা সতর্কতার সাথে সম্পর্কিত লিঙ্ক হিসেবে ব্যবহৃত হয়।

উদাহরণ: Notification with Links

<div class="notification is-info">
  <button class="delete"></button>
  Info: You can find more details <a href="#">here</a>.
</div>

<div class="notification is-success">
  <button class="delete"></button>
  Success: Your action was successful! <a href="#">Click here for more details.</a>
</div>

এখানে:

• <a href="#">: নোটিফিকেশনে লিঙ্ক যুক্ত করা হয়েছে, যা ব্যবহারকারীকে বিস্তারিত জানিয়ে দিতে পারে।

৬. Responsive Notifications (রেসপনসিভ নোটিফিকেশন)

Bulma-তে Notification কম্পোনেন্টটি স্বয়ংক্রিয়ভাবে রেসপনসিভ। অর্থাৎ, এটি বিভিন্ন স্ক্রীন সাইজের সাথে মানিয়ে নিতে পারে। তবে আপনি চাইলে এর আকার আরও কাস্টমাইজ করতে পারেন, যেমন স্ক্রীন সাইজ অনুযায়ী নোটিফিকেশনের আকার পরিবর্তন করা।

উদাহরণ: Notification with Responsive Size

<div class="notification is-info is-small">
  <button class="delete"></button>
  This is a small info notification.
</div>

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

এখানে:

• is-small: ছোট আকারের নোটিফিকেশন।
• is-large: বড় আকারের নোটিফিকেশন।

সারাংশ

Bulma-তে Notification কম্পোনেন্টটি বিভিন্ন ধরনের বার্তা এবং সতর্কতা উপস্থাপন করার জন্য ব্যবহৃত হয়। আপনি Notification Colors (যেমন is-primary, is-success, is-warning, is-danger, ইত্যাদি) ব্যবহার করে বার্তাগুলির ধরন এবং গুরুত্ব বুঝাতে পারেন। এছাড়া, Dismissable Notifications এর মাধ্যমে আপনি নোটিফিকেশনকে বন্ধ করার সুযোগ দিতে পারেন। Icon এবং Links সহ আরও কাস্টমাইজেশন সম্ভব, যা ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করে। Bulma এর এই কম্পোনেন্টটি সহজে রেসপনসিভ এবং কাস্টমাইজযোগ্য হওয়ায় দ্রুত এবং কার্যকরী UI ডিজাইন তৈরি করতে সাহায্য করে।

Bulma-তে Message Box একটি উপকারী উপাদান যা বার্তা বা নোটিফিকেশন প্রদর্শনের জন্য ব্যবহৃত হয়। এটি সাধারণত একটি নির্দিষ্ট পটভূমি রঙ, বর্ডার এবং কিছু কন্টেন্ট নিয়ে তৈরি করা হয়, যা ব্যবহারকারীদের জন্য বার্তা বা সতর্কতা জানায়। Bulma-র Message Box দুটি মূল অংশ নিয়ে গঠিত: Message Header এবং Message Body।

১. Message Box

Bulma-তে Message Box সাধারণত একটি message ক্লাস দিয়ে তৈরি করা হয়, যা প্রধান কন্টেইনার হিসেবে কাজ করে। এর মধ্যে message-header এবং message-body ক্লাসের মাধ্যমে বার্তার শিরোনাম এবং মূল কন্টেন্ট যোগ করা হয়। বার্তা বিভিন্ন রঙে (যেমন: সাফল্য, সতর্কতা, ত্রুটি ইত্যাদি) প্রদর্শিত হতে পারে।

উদাহরণ: Basic Message Box

<div class="message is-info">
  <div class="message-header">
    <p>Info Message</p>
  </div>
  <div class="message-body">
    This is an informational message to notify the user.
  </div>
</div>

এখানে:

• message: বার্তা কন্টেইনার।
• is-info: বার্তার জন্য রঙ নির্বাচন (এখানে ইনফরমেশনাল বা তথ্যপূর্ণ বার্তা)।
• message-header: বার্তার শিরোনাম।
• message-body: বার্তার মূল কন্টেন্ট।

২. Message Header

Message Header একটি বার্তার শিরোনাম, যা সাধারণত message-header ক্লাসের মাধ্যমে সংজ্ঞায়িত করা হয়। এটি প্রায়শই বার্তার শ্রেণি বা টাইটেল প্রদর্শন করতে ব্যবহৃত হয়, এবং এখানে আপনি p, h1, h2 প্রভৃতি HTML ট্যাগ ব্যবহার করতে পারেন। এর মধ্যে একটি Close Buttonও রাখা যেতে পারে।

উদাহরণ: Message Header with Close Button

<div class="message is-danger">
  <div class="message-header">
    <p>Error Occurred</p>
    <button class="delete"></button>
  </div>
  <div class="message-body">
    An error has occurred while processing your request. Please try again later.
  </div>
</div>

এখানে:

• message-header: বার্তার শিরোনাম (যেখানে "Error Occurred" লেখা আছে)।
• delete: ক্লোজ বাটন, যা ব্যবহারকারীকে বার্তা বন্ধ করতে সাহায্য করে।

৩. Message Body

Message Body হল বার্তার মূল কন্টেন্ট, যা message-body ক্লাস দিয়ে সন্নিবেশিত করা হয়। এই অংশে আপনি বার্তা সম্পর্কিত বিস্তারিত বা উপকারী তথ্য প্রদর্শন করতে পারেন।

উদাহরণ: Simple Message Body

<div class="message is-warning">
  <div class="message-header">
    <p>Warning Message</p>
  </div>
  <div class="message-body">
    Please note that your session will expire in 5 minutes.
  </div>
</div>

এখানে:

• message-body: বার্তার মূল বিষয়বস্তু, যেখানে সতর্কবার্তা দেওয়া হয়েছে।

৪. Message Box Styles

Bulma-তে Message Box বিভিন্ন ধরণের স্টাইলের সাথে পাওয়া যায়, যেগুলি বার্তার উদ্দেশ্য অনুসারে রঙ পরিবর্তন করতে সহায়তা করে:

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

উদাহরণ: Multiple Message Box Styles

<div class="message is-success">
  <div class="message-header">
    <p>Success</p>
  </div>
  <div class="message-body">
    Your operation was successful!
  </div>
</div>

<div class="message is-warning">
  <div class="message-header">
    <p>Warning</p>
  </div>
  <div class="message-body">
    This is a warning message. Proceed with caution.
  </div>
</div>

<div class="message is-danger">
  <div class="message-header">
    <p>Error</p>
  </div>
  <div class="message-body">
    Something went wrong. Please try again.
  </div>
</div>

এখানে:

• is-success: সফলতার বার্তা।
• is-warning: সতর্কবার্তা।
• is-danger: ত্রুটি বা বিপদ বার্তা।

৫. Customization and Layout

Bulma তে Message Box কাস্টমাইজ করতে আপনি বিভিন্ন CSS ক্লাস বা ইনলাইন স্টাইল ব্যবহার করতে পারেন। আপনি যেমন বার্তার রঙ, সাইজ, শীর্ষে স্পেস, মার্জিন ইত্যাদি কাস্টমাইজ করতে পারেন।

উদাহরণ: Customized Message Box

<div class="message is-primary" style="margin-bottom: 20px;">
  <div class="message-header">
    <p>Custom Message</p>
  </div>
  <div class="message-body">
    This is a customized message box with additional margin.
  </div>
</div>

এখানে:

• style="margin-bottom: 20px;": এখানে ইনলাইন CSS ব্যবহার করে বার্তার নিচে ২০ পিক্সেল মার্জিন দেওয়া হয়েছে।

সারাংশ

Bulma তে Message Box একটি গুরুত্বপূর্ণ উপাদান যা বার্তা বা নোটিফিকেশন প্রদর্শনের জন্য ব্যবহৃত হয়। এর মধ্যে Message Header বার্তার শিরোনাম হিসেবে কাজ করে, এবং Message Body বার্তার মূল কন্টেন্ট ধারণ করে। Bulma বিভিন্ন রঙের ক্লাস যেমন is-info, is-success, is-warning, is-danger প্রদান করে, যা বার্তার উদ্দেশ্য অনুসারে স্টাইল পরিবর্তন করতে সহায়তা করে। কাস্টমাইজেশনের মাধ্যমে আপনি Message Box এর প্রদর্শন এবং ডিজাইন আরও উন্নত করতে পারেন।

Bulma ফ্রেমওয়ার্কে Alerts এবং Pop-ups তৈরি করা সহজ এবং সেগুলো ওয়েবসাইটের ইউজার ইন্টারফেসে বার্তা, সতর্কতা বা ইনফরমেশন প্রদর্শনের জন্য ব্যবহৃত হয়। Alerts সাধারণত একটি বার্তা বা সতর্কতাকে প্রদর্শন করে, যেখানে Pop-ups বিশেষভাবে অতিরিক্ত কন্টেন্ট বা একশন প্রম্পট হিসেবে ব্যবহৃত হয়।

১. Bulma এর Alerts

Alerts সাধারণত কোনো বার্তা, যেমন সফলতা, ত্রুটি, সতর্কতা বা সাধারণ তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। Bulma তে এর জন্য বিশেষভাবে তৈরি করা বিভিন্ন স্টাইলের ক্লাস রয়েছে, যেমন—is-success, is-danger, is-warning, এবং is-info।

Alert তৈরি করা

<div class="notification is-success">
  <button class="delete"></button>
  Success! Your action was completed successfully.
</div>

<div class="notification is-danger">
  <button class="delete"></button>
  Error! Something went wrong.
</div>

<div class="notification is-warning">
  <button class="delete"></button>
  Warning! Please check your input.
</div>

<div class="notification is-info">
  <button class="delete"></button>
  Info! Please be aware of the changes.
</div>

এখানে:

• is-success: সফলতার বার্তা (green color)।
• is-danger: ত্রুটির বার্তা (red color)।
• is-warning: সতর্কতার বার্তা (yellow color)।
• is-info: সাধারণ তথ্য বার্তা (blue color)।
• button.delete: একটি ক্লোজ বাটন, যা ব্যবহারকারীকে আলার্মটি বন্ধ করতে সাহায্য করে।

Alert সঠিকভাবে বন্ধ করা (JavaScript)

ক্লোজ বাটনে ক্লিক করলে আলার্মটি বন্ধ করতে নিচের JavaScript কোড ব্যবহার করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const deleteButtons = document.querySelectorAll('.notification .delete');
    
    deleteButtons.forEach(button => {
      button.addEventListener('click', () => {
        button.parentElement.remove();
      });
    });
  });
</script>

এখানে:

• delete বাটনটি ক্লিক করলে সংশ্লিষ্ট notification এলিমেন্টটি DOM থেকে সরিয়ে ফেলা হবে।

২. Bulma এর Pop-up

Pop-ups সাধারণত মডাল বা কোনো অতিরিক্ত কন্টেন্ট প্রদর্শনের জন্য ব্যবহৃত হয়, যা ব্যবহারকারীর জন্য গুরুত্বপূর্ণ তথ্য বা একশন প্রম্পট প্রদান করে। Bulma তে আপনি সহজেই Pop-ups তৈরি করতে পারেন, এবং এগুলো সাধারণত মডাল উইন্ডোর মতো আচরণ করে।

Basic Pop-up তৈরি করা

<button class="button is-primary" id="open-popup">Open Pop-up</button>

<div id="popup" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="box">
      <h1 class="title">Pop-up Title</h1>
      <p>This is a simple pop-up.</p>
      <button class="button is-danger" id="close-popup">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• modal: পপ-আপ উইন্ডোর প্রধান কনটেইনার।
• modal-background: পপ-আপ উইন্ডোর ব্যাকগ্রাউন্ড, যা সাধারণত অস্বচ্ছ থাকে।
• modal-content: পপ-আপ উইন্ডোর কন্টেন্ট, যা সাধারণত box ক্লাসে থাকে।
• modal-close: পপ-আপ উইন্ডো বন্ধ করার জন্য একটি ক্লোজ বাটন।

Pop-up সক্রিয় এবং নিষ্ক্রিয় করা (JavaScript)

পপ-আপটি JavaScript এর মাধ্যমে সক্রিয় এবং নিষ্ক্রিয় করা হয়। নিচে দেয়া কোডটি পপ-আপ খুলতে এবং বন্ধ করতে সহায়তা করবে।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    // Get the pop-up and buttons
    const openPopupButton = document.getElementById('open-popup');
    const popup = document.getElementById('popup');
    const closePopupButton = document.getElementById('close-popup');

    // Open the pop-up
    openPopupButton.addEventListener('click', () => {
      popup.classList.add('is-active');
    });

    // Close the pop-up
    closePopupButton.addEventListener('click', () => {
      popup.classList.remove('is-active');
    });

    // Close the pop-up if clicking on the background
    popup.querySelector('.modal-background').addEventListener('click', () => {
      popup.classList.remove('is-active');
    });
  });
</script>

এখানে:

• is-active ক্লাস পপ-আপকে দৃশ্যমান (visible) করে তোলে।
• modal-background তে ক্লিক করলে পপ-আপ বন্ধ হয়ে যায়।

৩. Alerts এবং Pop-ups এর কাস্টমাইজেশন

Bulma তে আপনি Alerts এবং Pop-ups এর স্টাইল কাস্টমাইজ করতে পারেন, যেমন তাদের রঙ, সাইজ, বা উপাদানগুলো।

Alerts এর কাস্টমাইজেশন

Alerts এর রঙ এবং ডিজাইন কাস্টমাইজ করতে আপনি is-dark, is-light, বা অন্যান্য ক্লাস ব্যবহার করতে পারেন।

<div class="notification is-dark">
  <button class="delete"></button>
  Dark themed alert message.
</div>

<div class="notification is-light">
  <button class="delete"></button>
  Light themed alert message.
</div>

এখানে:

• is-dark: ডার্ক থিমের আলার্ম।
• is-light: লাইট থিমের আলার্ম।

Pop-up এর সাইজ কাস্টমাইজেশন

Pop-up এর সাইজ কাস্টমাইজ করতে আপনি is-small, is-medium, is-large অথবা is-fullwidth ক্লাস ব্যবহার করতে পারেন।

<div id="popup" class="modal">
  <div class="modal-background"></div>
  <div class="modal-content is-medium">
    <div class="box">
      <h1 class="title">Medium Pop-up</h1>
      <button class="button is-danger" id="close-popup">Close</button>
    </div>
  </div>
  <button class="modal-close is-large" aria-label="close"></button>
</div>

এখানে:

• is-medium: মডাল সাইজ মাঝারি হবে।
• আপনি is-small, is-large, বা is-fullwidth ক্লাসও ব্যবহার করতে পারেন সাইজ কাস্টমাইজ করতে।

৪. Alerts এবং Pop-ups এর অ্যাডভান্সড ব্যবহার

আপনি Alert এবং Pop-up কম্পোনেন্টগুলোকে আরও উন্নত এবং ইন্টারঅ্যাকটিভ করতে কিছু অতিরিক্ত বৈশিষ্ট্য যোগ করতে পারেন, যেমন অটো-কলাপসিং বা ডেলayed ডিসপ্লে।

Alert স্যুইচ অফ (Auto-dismiss)

আপনি setTimeout ব্যবহার করে একটি এলার্ট কিছু সময় পর অটোমেটিক বন্ধ করতে পারেন।

<script>
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      const alert = document.querySelector('.notification');
      alert.remove();
    }, 5000); // 5 seconds delay
  });
</script>

এখানে, ৫ সেকেন্ড পর notification এলিমেন্টটি DOM থেকে সরিয়ে নেওয়া হবে।

সারাংশ

Bulma এর Alerts এবং Pop-ups সহজে ওয়েবসাইটে গুরুত্বপূর্ণ বার্তা এবং ইনফরমেশন প্রদর্শন করার জন্য ব্যবহৃত হয়। Alerts কম্পোনেন্টের মাধ্যমে আপনি সফলতা, ত্রুটি, সতর্কতা বা তথ্য বার্তা প্রদর্শন করতে পারেন, এবং Pop-ups কম্পোনেন্টের মাধ্যমে অতিরিক্ত কন্টেন্ট বা একশন প্রম্পট ব্যবহারকারীর কাছে উপস্থাপন করতে পারেন। Bulma এর ক্লাসগুলো ব্যবহার করে এগুলো সহজেই কাস্টমাইজ করা যায় এবং JavaScript এর মাধ্যমে তাদের কার্যকারিতা নিয়ন্ত্রণ করা সম্ভব।