Message Box এবং Message Header/Body

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 এর প্রদর্শন এবং ডিজাইন আরও উন্নত করতে পারেন।