Bulma ফ্রেমওয়ার্কে Dropdown এবং Modal কম্পোনেন্টগুলো ব্যবহার করা খুবই সহজ এবং এগুলো আপনার ওয়েবসাইটের ইন্টারেক্টিভিটি এবং ইউজার এক্সপিরিয়েন্স (UX) উন্নত করতে সহায়তা করে। এই কম্পোনেন্টগুলোর মাধ্যমে আপনি মেনু, পপআপ, কিংবা অতিরিক্ত কন্টেন্ট ডিসপ্লে করতে পারেন, যা ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও সমৃদ্ধ এবং কার্যকরী করে তোলে।
১. Bulma এর Dropdown
Bulma তে Dropdown কম্পোনেন্টটি সাধারণত মেনু হিসেবে ব্যবহার করা হয় যেখানে একাধিক অপশন থাকে। ড্রপডাউন সাধারণত একটি বাটন বা ট্যাগের মাধ্যমে খোলা হয় এবং একাধিক অপশন প্রদর্শিত হয়।
Dropdown তৈরি করা
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
<a href="#" class="dropdown-item">
Option 4
</a>
</div>
</div>
</div>
এখানে:
- dropdown-trigger: এটি ড্রপডাউন খোলার জন্য ট্রিগার বা বাটন হিসেবে কাজ করে।
- dropdown-menu: ড্রপডাউন মেনু, যেখানে সমস্ত অপশন বা আইটেম থাকে।
- dropdown-item: প্রতিটি অপশন বা আইটেমকে রিপ্রেজেন্ট করে।
এই ড্রপডাউনটি যখন ব্যবহারকারী বাটনে ক্লিক করবেন, তখন এটি খুলবে এবং অপশনগুলো প্রদর্শিত হবে।
Dropdown সক্রিয় করা (JavaScript)
Bulma তে ড্রপডাউন একটিভ করার জন্য সাধারণত একটু JavaScript ব্যবহার করা হয়, যাতে ড্রপডাউন ক্লিকের মাধ্যমে খুলতে পারে এবং বন্ধ হতে পারে।
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all dropdown triggers
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown-trigger');
trigger.addEventListener('click', () => {
dropdown.classList.toggle('is-active');
});
});
});
</script>
এখানে:
- is-active ক্লাস ড্রপডাউনটিকে দৃশ্যমান (visible) করে এবং এটি ক্লিকের মাধ্যমে টগল হয়।
২. Bulma এর Modal
Modal কম্পোনেন্টটি একটি পপআপ উইন্ডো হিসেবে কাজ করে যা সাধারণত অতিরিক্ত কন্টেন্ট বা তথ্য প্রদর্শন করতে ব্যবহৃত হয়। মডাল উইন্ডো সাধারণত ব্যাকগ্রাউন্ডের উপরে প্রদর্শিত হয় এবং ইউজারকে কোনো একশন নেওয়ার জন্য উৎসাহিত করে, যেমন—ফর্ম পূরণ, বার্তা দেখানো, ইত্যাদি।
Modal তৈরি করা
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p>This is a modal!</p>
<button class="button is-danger" id="close-modal">Close</button>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<button class="button is-primary" id="open-modal">Open Modal</button>
এখানে:
- modal: মডাল উইন্ডোর প্রধান কনটেইনার।
- modal-background: মডাল উইন্ডোর ব্যাকগ্রাউন্ড, যা অস্বচ্ছ হয়ে থাকে এবং মডাল উইন্ডোর বাইরে ক্লিক করা হলে মডাল বন্ধ হয়।
- modal-content: মডাল উইন্ডোর মূল কন্টেন্ট বা বক্স।
- modal-close: মডাল বন্ধ করার জন্য একটি ক্লোজ বাটন।
Modal সক্রিয় এবং নিষ্ক্রিয় করা (JavaScript)
Bulma তে মডাল উইন্ডোটি JavaScript এর মাধ্যমে চালু বা বন্ধ করা হয়। ব্যবহারকারী যখন মডাল ওপেন বা ক্লোজ করার জন্য বাটনে ক্লিক করবেন, তখন স্ক্রিপ্টটি ট্রিগার হবে।
<script>
document.addEventListener('DOMContentLoaded', () => {
// Modal opening
const openModalButton = document.getElementById('open-modal');
const modal = document.getElementById('modal');
const closeModalButton = document.getElementById('close-modal');
openModalButton.addEventListener('click', () => {
modal.classList.add('is-active');
});
// Modal closing
closeModalButton.addEventListener('click', () => {
modal.classList.remove('is-active');
});
// Close modal if clicking on the background
modal.querySelector('.modal-background').addEventListener('click', () => {
modal.classList.remove('is-active');
});
});
</script>
এখানে:
- is-active ক্লাস যোগ করা হলে মডালটি দৃশ্যমান (visible) হয়ে যায়।
- modal-background তে ক্লিক করা হলে মডালটি বন্ধ হয়ে যায়।
৩. Modal এবং Dropdown এর কাস্টমাইজেশন
Bulma তে আপনি Dropdown এবং Modal কম্পোনেন্টগুলোর স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি মডাল উইন্ডোর সাইজ, রঙ বা ট্রান্সপারেন্সি পরিবর্তন করতে পারবেন।
Modal সাইজ কাস্টমাইজেশন
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content is-medium">
<div class="box">
<p>This is a medium-sized modal!</p>
<button class="button is-danger" id="close-modal">Close</button>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
এখানে is-medium ক্লাস মডালের সাইজ মাঝারি করে দিবে। আপনি is-small, is-large, is-fullwidth ক্লাসও ব্যবহার করতে পারেন।
Dropdown এ আইকন এবং ক্লাস কাস্টমাইজেশন
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button">
<span>More options</span>
<span class="icon is-small">
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
</div>
</div>
</div>
এখানে:
- is-right ক্লাসটি ড্রপডাউনকে ডানদিকে স্থানান্তরিত করে।
- fa-ellipsis-v আইকন ব্যবহার করা হয়েছে, যা তিনটি ডটের আকারে থাকে এবং এটি সাধারণত আরও অপশন মেনুতে ব্যবহৃত হয়।
সারাংশ
Bulma এর Dropdown এবং Modal কম্পোনেন্টগুলো ওয়েবসাইটের ইন্টারঅ্যাকটিভিটি বাড়াতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। ড্রপডাউন মেনু এবং মডাল উইন্ডো তৈরির জন্য Bulma সহজ, পরিষ্কার এবং কার্যকরী ক্লাস প্রদান করে। JavaScript ব্যবহার করে আপনি এগুলোর কার্যকারিতা বাড়াতে এবং কাস্টমাইজ করতে পারেন। Bulma এর এই কম্পোনেন্টগুলো রেসপনসিভ এবং মোবাইল ফ্রেন্ডলি হওয়ায়, তা যেকোনো ডিভাইসে সঠিকভাবে কাজ করে।
Bulma CSS ফ্রেমওয়ার্কে Dropdown কম্পোনেন্টটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং সহজ পদ্ধতিতে মেনু বা বিকল্প প্রদর্শনের সুবিধা দেয়। এটি সাধারণত একটি আইকন বা বাটনের মাধ্যমে ট্রিগার হয়, এবং এর মাধ্যমে আরও বিভিন্ন অপশন বা কন্টেন্ট প্রকাশিত হয়। এটি ওয়েব অ্যাপ্লিকেশন বা সাইটে ব্যবহারকারী ইন্টারফেসে একটি অত্যন্ত কার্যকরী এবং ইনটারেক্টিভ উপাদান।
এখানে আমরা Bulma এর Dropdown Component কীভাবে ব্যবহার করা যায় তা বিস্তারিতভাবে দেখবো।
১. Dropdown Component এর সাধারণ গঠন
Bulma তে dropdown কম্পোনেন্টটি সাধারণত একটি button বা link এর মাধ্যমে ট্রিগার করা হয় এবং পরে মেনু বা একাধিক বিকল্প দেখানো হয়। এটি অত্যন্ত সহজে কনফিগার করা যায় এবং HTML, CSS ও JavaScript কোডের মাধ্যমে ব্যবহার করা হয়।
সাধারণ Syntax
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
Option 4
</a>
</div>
</div>
</div>
এখানে:
- dropdown: এটি পুরো ড্রপডাউন কম্পোনেন্টের কনটেইনার।
- dropdown-trigger: এটি বাটন বা ট্রিগার যা ড্রপডাউন মেনু খোলার জন্য ব্যবহৃত হয়।
- dropdown-menu: এটি ড্রপডাউন মেনুর কনটেইনার।
- dropdown-content: এটি ড্রপডাউনের মধ্যে থাকা আইটেমগুলো ধারণ করে।
২. Dropdown Trigger
ড্রপডাউনটি একটি button বা link এর মাধ্যমে ট্রিগার হয়, এবং এই বাটনটি সাধারণত একটি dropdown-trigger ক্লাস দ্বারা চিহ্নিত করা হয়। এখানে একটি বাটন ব্যবহার করা হয়েছে যা icon সহ প্রদর্শিত হবে।
উদাহরণ:
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
এখানে, aria-haspopup="true" এবং aria-controls="dropdown-menu" অ্যাট্রিবিউটগুলো অ্যাক্সেসিবিলিটি (accessibility) এর জন্য ব্যবহার করা হয়েছে, যা স্ক্রীন রিডার ব্যবহারকারীদের ড্রপডাউন এর অস্তিত্ব জানাতে সাহায্য করে।
৩. Dropdown Menu
dropdown-menu এর মধ্যে মেনুর আইটেমগুলো থাকে, এবং এগুলোর প্রতিটি আইটেম dropdown-item ক্লাস দিয়ে চিহ্নিত করা হয়। মেনুটি সাধারণত মাউস ক্লিকের মাধ্যমে খোলা হয় এবং বাটনটি চাপলে এটি প্রদর্শিত হয়।
উদাহরণ:
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Profile
</a>
<a href="#" class="dropdown-item">
Settings
</a>
<a href="#" class="dropdown-item">
Log out
</a>
</div>
</div>
এখানে:
- dropdown-content: এটি ড্রপডাউনের মধ্যে আইটেমগুলির কন্টেইনার।
- dropdown-item: এটি প্রতিটি ড্রপডাউন আইটেম।
৪. Dropdown-এর জন্য JavaScript ব্যবহারের প্রয়োজনীয়তা
যদিও Bulma মূলত একটি CSS ফ্রেমওয়ার্ক, তবে ড্রপডাউনটি কার্যকরী করতে JavaScript ব্যবহার করা প্রয়োজন। JavaScript কোডটি বাটন ক্লিক করলে ড্রপডাউন মেনুটি প্রদর্শন বা লুকিয়ে রাখার কাজ করে।
উদাহরণ (JavaScript):
<script>
document.addEventListener('DOMContentLoaded', () => {
// Get all dropdown triggers
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(dropdown => {
const trigger = dropdown.querySelector('.dropdown-trigger');
const menu = dropdown.querySelector('.dropdown-menu');
trigger.addEventListener('click', () => {
menu.classList.toggle('is-active');
});
// Close dropdown if clicked outside
document.addEventListener('click', (event) => {
if (!dropdown.contains(event.target)) {
menu.classList.remove('is-active');
}
});
});
});
</script>
এই স্ক্রিপ্টটি:
- ড্রপডাউনটি খোলার জন্য click ইভেন্ট হ্যান্ডলার যোগ করে।
- ড্রপডাউন থেকে বাইরে ক্লিক করলে মেনু বন্ধ করার জন্য আরেকটি ইভেন্ট হ্যান্ডলার যোগ করে।
৫. Dropdown এর রেসপনসিভ ব্যবহার
Bulma ড্রপডাউন কম্পোনেন্টটি রেসপনসিভ হওয়ায়, আপনি এটিকে মোবাইল বা বড় স্ক্রীনে একইভাবে ব্যবহার করতে পারবেন। তবে আপনি যদি বিশেষ কোনো ভিউতে ড্রপডাউনটি আলাদা করতে চান, তাহলে আপনাকে CSS বা JavaScript দিয়ে কাস্টমাইজ করতে হবে।
উদাহরণস্বরূপ:
- মোবাইল স্ক্রীনে ড্রপডাউনটি ফুল স্ক্রীনে হতে পারে।
- বড় স্ক্রীনে ড্রপডাউনটি কেবল হরিজেন্টাল স্লট হিসেবে কাজ করতে পারে।
৬. Dropdown-এর Additional Styling
Bulma আপনাকে ড্রপডাউনকে আরো সুন্দর করে কাস্টমাইজ করার সুযোগ দেয়। আপনি is-boxed, is-right, is-up ক্লাস ব্যবহার করে ড্রপডাউনের অবস্থান, আকার এবং স্টাইল পরিবর্তন করতে পারেন।
উদাহরণ (Additional Styling):
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button">
<span>More Options</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
</div>
</div>
</div>
এখানে:
- is-right: ড্রপডাউন মেনুটিকে ডানদিকে আলাইন করবে।
- is-boxed: ড্রপডাউনটি বক্স আকারে উপস্থাপন করবে।
সারাংশ
Bulma CSS ফ্রেমওয়ার্কের Dropdown Component ব্যবহার করে আপনি সহজেই রেসপনসিভ এবং ইন্টারেক্টিভ ড্রপডাউন মেনু তৈরি করতে পারেন। এর মধ্যে ড্রপডাউন ট্রিগার, মেনু এবং আইটেমগুলির জন্য নির্দিষ্ট CSS ক্লাস ব্যবহার করা হয়, এবং JavaScript এর মাধ্যমে ড্রপডাউনটি খোলা বা বন্ধ করা যায়। Bulma এর ড্রপডাউনটি মোবাইল-প্রথম ডিজাইনের জন্যও উপযুক্ত এবং সহজেই কাস্টমাইজ করা যায়।
Bulma CSS ফ্রেমওয়ার্কে dropdown উপাদানটি সহজেই তৈরি করা যায়। Bulma ড্রপডাউন মেনু প্রাথমিকভাবে একটি বাটন অথবা লিঙ্ক ক্লিক করলে একটি মেনু বা তালিকা প্রদর্শন করে। আপনি সহজে dropdown এর অবস্থান কাস্টমাইজ করতে পারেন এবং প্রয়োজনে অ্যানিমেশন যুক্ত করতে পারেন।
এই গাইডে আমরা Dropdown এর অবস্থান এবং অ্যানিমেশন কিভাবে ব্যবহার করতে হয় তা বিস্তারিতভাবে দেখব।
১. Dropdown এর অবস্থান (Positioning)
Bulma তে ড্রপডাউন উপাদানটি প্রাথমিকভাবে dropdown ক্লাসের মাধ্যমে তৈরি হয়। ড্রপডাউন মেনুর অবস্থান কাস্টমাইজ করার জন্য আপনি is-right, is-left, is-up, এবং is-bottom ক্লাস ব্যবহার করতে পারেন।
উদাহরণ: ড্রপডাউন মেনুর অবস্থান
<div class="dropdown is-right">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
এখানে is-right ক্লাস ব্যবহার করা হয়েছে, যা ড্রপডাউন মেনুকে ডান দিকে স্থাপন করবে। Bulma তে ড্রপডাউন মেনুর জন্য পূর্বনির্ধারিত অবস্থানগুলি হলো:
is-right: ড্রপডাউন মেনুকে ডান দিকে স্থাপন করবে।is-left: ড্রপডাউন মেনুকে বাম দিকে স্থাপন করবে।is-up: ড্রপডাউন মেনুকে উপরের দিকে স্থাপন করবে।is-bottom: ড্রপডাউন মেনুকে নিচের দিকে স্থাপন করবে।
উদাহরণ: বাম এবং উপরের দিকে ড্রপডাউন
<div class="dropdown is-left is-up">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
এখানে is-left is-up ক্লাস ব্যবহার করা হয়েছে, যার ফলে ড্রপডাউন মেনু বাম এবং উপরের দিকে স্থাপন করা হয়েছে।
২. Dropdown এর অ্যানিমেশন (Animation)
Bulma ড্রপডাউনে ডিফল্ট অ্যানিমেশন প্রভাব প্রদান করে না, তবে আপনি CSS অ্যানিমেশন ব্যবহার করে মেনুর প্রদর্শন এবং গোপন করার সময় অ্যানিমেশন যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ড্রপডাউন মেনুর fade-in এবং fade-out অ্যানিমেশন প্রয়োগ করা হয়েছে।
উদাহরণ: Dropdown এ অ্যানিমেশন যোগ করা
<head>
<style>
.dropdown-menu {
display: none;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.dropdown.is-active .dropdown-menu {
display: block;
opacity: 1;
}
</style>
</head>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
<script>
// JavaScript to toggle dropdown visibility
const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdown = document.querySelector('.dropdown');
dropdownTrigger.addEventListener('click', function() {
dropdown.classList.toggle('is-active');
});
</script>
এখানে, display এবং opacity এর মাধ্যমে আমরা ড্রপডাউন মেনুকে fade-in এবং fade-out অ্যানিমেশন দিয়েছি। is-active ক্লাস যোগ বা সরানোর মাধ্যমে মেনু প্রদর্শিত বা গোপন হয়।
opacity: 0: ড্রপডাউন মেনুকে অদৃশ্য করে দেয়।opacity: 1: ড্রপডাউন মেনুকে দৃশ্যমান করে তোলে।transition: opacity 0.3s ease-in-out;: অ্যানিমেশন প্রয়োগের সময় একটি ধীর এবং মসৃণ ট্রানজিশন তৈরি করে।
৩. Custom Dropdown Animation
আপনি আরো কাস্টম অ্যানিমেশন তৈরি করতে পারেন, যেমন ড্রপডাউন মেনুর মধ্যে slide-down বা slide-up অ্যানিমেশন। এটি করতে transform এবং translateY প্রপার্টি ব্যবহার করা যেতে পারে।
উদাহরণ: Slide-down অ্যানিমেশন
<head>
<style>
.dropdown-menu {
display: none;
transform: translateY(-10px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.dropdown.is-active .dropdown-menu {
display: block;
transform: translateY(0);
opacity: 1;
}
</style>
</head>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</div>
</div>
<script>
// JavaScript to toggle dropdown visibility
const dropdownTrigger = document.querySelector('.dropdown-trigger');
const dropdown = document.querySelector('.dropdown');
dropdownTrigger.addEventListener('click', function() {
dropdown.classList.toggle('is-active');
});
</script>
এখানে transform: translateY(-10px) এবং opacity: 0 প্রাথমিক অবস্থায় ড্রপডাউন মেনুকে কিছুটা উপরে এবং অদৃশ্য করে দেয়। যখন is-active ক্লাস যোগ করা হয়, তখন translateY(0) এবং opacity: 1 দ্বারা মেনু স্লাইড ডাউন হয়ে দৃশ্যমান হয়।
সারাংশ
Bulma তে Dropdown এর অবস্থান এবং অ্যানিমেশন কাস্টমাইজ করা খুবই সহজ। আপনি is-right, is-left, is-up, এবং is-bottom ক্লাস ব্যবহার করে ড্রপডাউন মেনুর অবস্থান নিয়ন্ত্রণ করতে পারেন। এছাড়া, CSS এবং JavaScript ব্যবহার করে আপনি ড্রপডাউন মেনুর জন্য fade, slide, বা অন্যান্য অ্যানিমেশন যোগ করতে পারেন। এটি আপনার ওয়েব পেজে একটি আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সহায়তা করবে।
Bulma ফ্রেমওয়ার্কে Modal কম্পোনেন্ট একটি পপ-আপ উইন্ডো হিসেবে কাজ করে যা সাধারণত ইউজারদের ইন্টারঅ্যাকশন বা ইনপুট গ্রহণের জন্য ব্যবহৃত হয়। এটি একটি সুন্দর এবং সিম্পল ইউজার ইন্টারফেস এলিমেন্ট, যা ব্যবহারকারীর দৃষ্টি আকর্ষণ করে এবং নির্দিষ্ট তথ্য বা কনফার্মেশন প্রদান করে। Bulma তে Modal কম্পোনেন্ট তৈরি করা খুবই সহজ এবং এটি বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে।
১. Modal Component Structure
Bulma Modal কম্পোনেন্ট একটি বেসিক HTML কাঠামোতে তৈরি করা হয়। এটি সাধারণত তিনটি মূল অংশে বিভক্ত:
- Modal background: পপ-আপ উইন্ডোর ব্যাকগ্রাউন্ড (যা উইন্ডোটিকে ঘিরে রাখে)।
- Modal content: মূল কনটেন্ট অংশ (যেখানে আপনার টেক্সট বা অন্যান্য উপাদান থাকে)।
- Modal close button: মোডাল উইন্ডো বন্ধ করার জন্য একটি ক্লোজ বাটন।
বেসিক Modal উদাহরণ:
<!-- Trigger Button -->
<button class="button is-primary" id="openModal">Open Modal</button>
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Modal Title</h1>
<p>This is the modal content. You can put any content here.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div>
<script>
// JavaScript to handle modal open and close actions
document.getElementById('openModal').addEventListener('click', function() {
document.getElementById('myModal').classList.add('is-active');
});
document.getElementById('closeModal').addEventListener('click', function() {
document.getElementById('myModal').classList.remove('is-active');
});
</script>
Modal এর বিভিন্ন অংশ ব্যাখ্যা:
modal: মূল মোডাল উইন্ডো, যা.is-activeক্লাস ব্যবহার করে প্রদর্শিত হয়। যখন ক্লাসটি যোগ করা হয়, তখন এটি স্ক্রীনে প্রদর্শিত হয়।modal-background: এই অংশটি ব্যাকগ্রাউন্ডকে হালকা করে রাখে যাতে ব্যবহারকারী পপ-আপ উইন্ডোর বাইরে ক্লিক করতে না পারে। এটি সাদা বা অন্ধকার ছায়া দিতে সাহায্য করে।modal-content: এখানে আপনার মূল কনটেন্ট বা উপাদান থাকবে যেমন টেক্সট, ছবি, ফর্ম ইত্যাদি।modal-close is-large: মোডাল উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন, যা মোডাল থেকেis-activeক্লাস মুছে ফেলতে সহায়তা করে।
২. Modal Configuration (কনফিগারেশন)
Bulma Modal কম্পোনেন্ট কনফিগার করার মাধ্যমে আপনি এর আকার, স্টাইল এবং আচরণ পরিবর্তন করতে পারেন। আপনি মোডাল উইন্ডোকে সাধারণ আকার, মাঝারি আকার বা বড় আকারে কনফিগার করতে পারেন।
Modal এর আকার কনফিগার করা
- Normal Size (সাধারণ আকার):
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Normal Modal</h1>
<p>This is the content of a normal size modal.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
- Medium Size (মাঝারি আকার):
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Medium Modal</h1>
<p>This modal is of medium size.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
এখানে modal-content ক্লাসে Bulma কোনো নির্দিষ্ট আকার সরাসরি প্রদান করে না, তবে আপনি is-small, is-medium, is-large ক্লাস ব্যবহার করে মোডালের আকার পরিবর্তন করতে পারেন।
- Large Size (বড় আকার):
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content is-large">
<div class="box">
<h1 class="title">Large Modal</h1>
<p>This modal is large and can hold more content.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
এখানে is-large ক্লাসটি মোডালের আকার বড় করে দেয়।
৩. Modal এর কাস্টম স্টাইল
Bulma তে মোডাল কাস্টমাইজেশন সহজ। আপনি CSS ব্যবহার করে মোডালের ব্যাকগ্রাউন্ড, কনটেন্ট, বর্ডার ইত্যাদি কাস্টমাইজ করতে পারেন।
কাস্টম স্টাইল উদাহরণ:
<style>
.modal-content {
max-width: 80%; /* Modal content width */
margin: 0 auto;
}
.modal-background {
background-color: rgba(0, 0, 0, 0.5); /* Darken background */
}
.modal-close {
color: #ff0000; /* Red color for close button */
}
</style>
<!-- Modal -->
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Custom Modal</h1>
<p>This modal has custom styling.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
এখানে:
modal-contentক্লাসের মাধ্যমে মোডালের কনটেন্টের প্রস্থ নির্ধারণ করা হয়েছে।modal-backgroundএর ব্যাকগ্রাউন্ড কালার সামান্য ডার্ক করা হয়েছে।modal-closeবাটনের রঙ পরিবর্তন করা হয়েছে।
৪. Modal এর অটো ক্লোজ
আপনি চাইলে মোডালকে কিছু নির্দিষ্ট সময় পর অটো ক্লোজও করতে পারেন। নিচের উদাহরণে মোডাল উইন্ডো ৫ সেকেন্ড পর অটো ক্লোজ হবে।
অটো ক্লোজ উদাহরণ:
<script>
// Automatically close modal after 5 seconds
setTimeout(function() {
document.getElementById('myModal').classList.remove('is-active');
}, 5000);
</script>
এখানে setTimeout() ফাংশনটি ব্যবহার করা হয়েছে যা ৫ সেকেন্ড পর মোডালকে বন্ধ করে দেয়।
৫. Modal এর স্লাইডিং ইফেক্ট
Bulma তে মোডাল উইন্ডোর মধ্যে স্লাইডিং ইফেক্ট যোগ করতে CSS বা জাভাস্ক্রিপ্ট ব্যবহার করা যায়। নিচে একটি স্লাইডিং মোডাল উদাহরণ দেয়া হয়েছে।
স্লাইডিং মোডাল উদাহরণ:
<style>
.modal {
transition: transform 0.3s ease-in-out;
transform: translateY(-100%);
}
.modal.is-active {
transform: translateY(0);
}
</style>
<!-- Trigger and Modal -->
<button class="button is-primary" id="openModal">Open Sliding Modal</button>
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Sliding Modal</h1>
<p>This modal slides down from the top.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close" id="closeModal"></button>
</div>
<script>
document.getElementById('openModal').addEventListener('click', function() {
document.getElementById('myModal').classList.add('is-active');
});
document.getElementById('closeModal').addEventListener('click', function() {
document.getElementById('myModal').classList.remove('is-active');
});
</script>
এখানে:
- CSS এর
transitionএবংtransformপ্রপার্টি ব্যবহার করে মোডালকে স্লাইড করার ইফেক্ট দেয়া হয়েছে।
সারাংশ
Bulma তে Modal কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই পপ-আপ উইন্ডো তৈরি করতে পারেন। এটি মোডাল উইন্ডোর ব্যাকগ্রাউ
ন্ড, কনটেন্ট এবং ক্লোজ বাটনসহ অত্যন্ত ইউজার ফ্রেন্ডলি। Bulma মোডালকে কাস্টমাইজ করার জন্য অনেক অপশন সরবরাহ করে, যেমন আকার পরিবর্তন, স্টাইলিং, এবং ইফেক্ট অ্যাড করা। এর সাহায্যে আপনি আপনার ওয়েবসাইটের ইন্টারঅ্যাকটিভিটি ও ইউজার এক্সপেরিয়েন্স উন্নত করতে পারবেন।
Bulma ফ্রেমওয়ার্কের Modal কম্পোনেন্ট একটি পপ-আপ ডায়ালগ উইন্ডো তৈরি করতে ব্যবহৃত হয়, যা ওয়েব পৃষ্ঠার মধ্যে নির্দিষ্ট তথ্য বা কনটেন্ট প্রদর্শন করতে সহায়তা করে। আপনি Modal-এ Dynamic Content যোগ করতে চাইলে JavaScript বা জেকুয়েরি ব্যবহার করে সেটি সহজেই করতে পারেন।
১. Modal এর স্ট্রাকচার
Bulma এ Modal কম্পোনেন্ট তৈরির জন্য কিছু স্ট্যান্ডার্ড HTML ক্লাস ব্যবহার করা হয়। Modal সাধারণত একটি কন্টেইনার, একটি বডি এবং একটি ক্লোজ বাটন নিয়ে গঠিত থাকে।
Modal এর সাধারণ স্ট্রাকচার:
<!-- Modal -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p id="dynamic-content">Loading content...</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Trigger Button -->
<button class="button is-primary" id="open-modal">Open Modal</button>
এখানে:
modalক্লাসটি Modal কন্টেইনার তৈরি করে।modal-backgroundএবংmodal-contentক্লাস Modal এর ব্যাকগ্রাউন্ড এবং কন্টেন্ট সেগমেন্ট নির্ধারণ করে।modal-closeক্লাসটি Modal বন্ধ করার জন্য ব্যবহৃত হয়।
২. Dynamic Content যোগ করা
Dynamic content যোগ করতে, JavaScript ব্যবহার করে আপনি Modal এর কন্টেন্ট পরিবর্তন করতে পারেন। যেমন, একটি বাটন ক্লিকের মাধ্যমে নতুন কন্টেন্ট লোড করা। নিচে উদাহরণ দেয়া হল।
উদাহরণ: Dynamic Content Modal
<!-- Modal Structure -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p id="dynamic-content">This content will change dynamically.</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Trigger Button -->
<button class="button is-primary" id="open-modal">Open Modal</button>
<!-- Script for Dynamic Content -->
<script>
document.getElementById('open-modal').addEventListener('click', function() {
// Update Modal content dynamically
document.getElementById('dynamic-content').innerHTML = "This is the new dynamic content!";
// Open the modal
document.getElementById('modal').classList.add('is-active');
});
// Close Modal when the close button is clicked
document.querySelector('.modal-close').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
// Close Modal when clicking outside the modal
document.querySelector('.modal-background').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
</script>
এখানে:
- JavaScript ব্যবহার করে Modal এর কন্টেন্ট পরিবর্তন করা হয়েছে (
innerHTMLব্যবহার করে)। classList.add('is-active')ব্যবহার করে Modal ওপেন করা হয়েছে এবংclassList.remove('is-active')দিয়ে Modal বন্ধ করা হয়েছে।- Modal এর ক্লোজ বাটন এবং ব্যাকগ্রাউন্ড ক্লিক করলে Modal বন্ধ হয়ে যাবে।
৩. AJAX বা API Call এর মাধ্যমে Dynamic Content
আপনি AJAX বা API কল ব্যবহার করে সার্ভার থেকে ডাইনামিক কন্টেন্ট লোড করতেও পারেন। নিচে উদাহরণ দেয়া হল যেখানে JSON ফাইল থেকে ডাটা লোড করা হচ্ছে।
উদাহরণ: API Call দিয়ে Dynamic Content Modal
<!-- Modal Structure -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<p id="dynamic-content">Loading content...</p>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Trigger Button -->
<button class="button is-primary" id="open-modal">Open Modal</button>
<!-- Script for Dynamic Content from API -->
<script>
document.getElementById('open-modal').addEventListener('click', function() {
// AJAX request to load dynamic content
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => {
// Update Modal content dynamically with API data
document.getElementById('dynamic-content').innerHTML = data.title;
// Open the modal
document.getElementById('modal').classList.add('is-active');
})
.catch(error => {
document.getElementById('dynamic-content').innerHTML = "Failed to load content.";
console.error(error);
});
});
// Close Modal when the close button is clicked
document.querySelector('.modal-close').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
// Close Modal when clicking outside the modal
document.querySelector('.modal-background').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
</script>
এখানে:
- fetch API ব্যবহার করে ডাইনামিক কন্টেন্ট লোড করা হয়েছে এবং এটি Modal এর মধ্যে প্রদর্শন করা হয়েছে।
- এই উদাহরণে
jsonplaceholderথেকে ডাটা নেয়া হচ্ছে, যা একটি ফ্রি API সার্ভিস।
৪. Modal-এর সাথে ফর্ম ব্যবহারের উদাহরণ
আপনি Modal এর মধ্যে ফর্ম বা ইনপুট ফিল্ডও যুক্ত করতে পারেন, যেখানে ব্যবহারকারী তথ্য পূর্ণ করতে পারে।
উদাহরণ: Modal with Form
<!-- Modal Structure -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<form id="modal-form">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" id="name" placeholder="Enter your name">
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary" type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Trigger Button -->
<button class="button is-primary" id="open-modal">Open Form</button>
<!-- Script for Dynamic Content and Form Submission -->
<script>
document.getElementById('open-modal').addEventListener('click', function() {
document.getElementById('modal').classList.add('is-active');
});
document.querySelector('.modal-close').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
document.querySelector('.modal-background').addEventListener('click', function() {
document.getElementById('modal').classList.remove('is-active');
});
document.getElementById('modal-form').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
alert('Hello, ' + name);
document.getElementById('modal').classList.remove('is-active');
});
</script>
এখানে:
- Modal এর মধ্যে একটি ফর্ম যোগ করা হয়েছে।
- ব্যবহারকারী ফর্ম পূর্ণ করে সাবমিট করলে তার নাম প্রদর্শন করা হয়।
সারাংশ
Bulma ফ্রেমওয়ার্কে Modal কম্পোনেন্টে Dynamic Content যুক্ত করা খুব সহজ এবং এটি JavaScript, AJAX বা API কলের মাধ্যমে করা যেতে পারে। আপনি Modal এর কন্টেন্ট পরিবর্তন, ডাটা লোডিং এবং ফর্ম সংক্রান্ত কার্যক্রম সহজেই পরিচালনা করতে পারেন। এই পদ্ধতিগুলো ব্যবহার করে আপনি আরও ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড মডাল তৈরি করতে পারবেন। Bulma এর ক্লিন ডিজাইন এবং সহজ ব্যবহারের কারণে Modal ব্যবহারে খুব কম কোডে কার্যকরী পপ-আপ তৈরি করা সম্ভব।
Read more
