Bulma CSS ফ্রেমওয়ার্কটি মূলত একটি স্টাইলিং টুল, তবে আপনি যখন এটি JavaScript (JS) এর সাথে ব্যবহার করেন, তখন এটি ওয়েব পেজে ডাইনামিক কনটেন্ট তৈরির জন্য শক্তিশালী হয়ে ওঠে। JS ব্যবহার করে আপনি Bulma এর বিভিন্ন কম্পোনেন্ট এবং লেআউটকে পরিবর্তন করতে, নতুন কনটেন্ট যোগ করতে, অথবা ইন্টারেক্টিভ ফিচার তৈরি করতে পারেন।
এই গাইডে আমরা দেখব কিভাবে JavaScript ব্যবহার করে Bulma এর সাথে ডাইনামিক কনটেন্ট তৈরি করা যায়।
১. JavaScript দিয়ে Dynamic Content Manipulate করা
Bulma এর কনটেন্টের সাথে ডাইনামিক কনটেন্ট যোগ করার জন্য JavaScript এর কিছু মৌলিক ফিচার ব্যবহার করা যায়। উদাহরণস্বরূপ, প্যানেল, মেনু, অথবা মডাল উইন্ডোর মধ্যে ডাইনামিক কনটেন্ট যোগ করা।
উদাহরণ: প্যানেল কম্পোনেন্টের সাথে Dynamic Content
ধরা যাক, আমাদের একটি প্যানেল কম্পোনেন্ট আছে এবং আমরা চাই যে ইউজার ক্লিক করলে প্যানেলে নতুন কনটেন্ট যোগ হোক।
<div class="panel">
<p class="panel-heading">
Dynamic Panel
</p>
<div class="panel-block" id="panel-content">
<p>This is the initial content.</p>
</div>
<button class="button is-primary" id="add-content">Add Content</button>
</div>
<script>
document.getElementById('add-content').addEventListener('click', function() {
const newContent = document.createElement('p');
newContent.textContent = 'This is new dynamic content added to the panel!';
document.getElementById('panel-content').appendChild(newContent);
});
</script>
এখানে:
- add-content বাটনে ক্লিক করলে নতুন p ট্যাগ তৈরি হয়ে প্যানেল ব্লকে যোগ হবে।
- createElement এবং appendChild পদ্ধতি ব্যবহার করে ডাইনামিক কনটেন্ট অ্যাড করা হচ্ছে।
২. Modal Dialog Box তৈরি করা
Bulma ফ্রেমওয়ার্কে একটি modal কম্পোনেন্ট রয়েছে, যা সাধারণত পপ-আপ উইন্ডো হিসেবে ব্যবহৃত হয়। আমরা JavaScript দিয়ে একটি modal তৈরি করতে পারি এবং সেটিকে ডাইনামিকভাবে উপস্থাপন করতে পারি।
উদাহরণ: Modal উইন্ডো তৈরি করা
<button class="button is-primary" id="show-modal">Show Modal</button>
<div class="modal" id="myModal">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box">
<h1 class="title">Dynamic Modal</h1>
<p>This is a modal window that can be shown dynamically.</p>
<button class="button is-success" id="close-modal">Close</button>
</div>
</div>
<button class="modal-close is-large" id="close-modal-btn" aria-label="close"></button>
</div>
<script>
// Show modal when button is clicked
document.getElementById('show-modal').addEventListener('click', function() {
document.getElementById('myModal').classList.add('is-active');
});
// Close modal when close button is clicked
document.getElementById('close-modal').addEventListener('click', function() {
document.getElementById('myModal').classList.remove('is-active');
});
// Close modal by clicking the background or close icon
document.getElementById('close-modal-btn').addEventListener('click', function() {
document.getElementById('myModal').classList.remove('is-active');
});
</script>
এখানে:
- is-active ক্লাস ব্যবহার করে modal উইন্ডোকে দেখা বা লুকানো হচ্ছে।
- ইউজার যখন Show Modal বাটনে ক্লিক করবে, তখন JavaScript এর মাধ্যমে modal উইন্ডো চালু হবে।
- Close বাটন বা close icon ক্লিক করলে modal বন্ধ হবে।
৩. Accordion (Expandable) Section তৈরি করা
Bulma ফ্রেমওয়ার্কে accordion-style expandable sections খুব জনপ্রিয়। JavaScript দিয়ে আপনি একটি সেকশনকে expand বা collapse করতে পারেন।
উদাহরণ: Accordion Section
<div class="accordion">
<div class="accordion-item">
<p class="accordion-title" id="section1">Section 1</p>
<div class="accordion-content" id="content1">
<p>This is the content of Section 1.</p>
</div>
</div>
<div class="accordion-item">
<p class="accordion-title" id="section2">Section 2</p>
<div class="accordion-content" id="content2">
<p>This is the content of Section 2.</p>
</div>
</div>
</div>
<script>
document.querySelectorAll('.accordion-title').forEach(function(title) {
title.addEventListener('click', function() {
const content = this.nextElementSibling;
content.style.display = (content.style.display === 'none' ? 'block' : 'none');
});
});
// Initially hide all accordion content
document.querySelectorAll('.accordion-content').forEach(function(content) {
content.style.display = 'none';
});
</script>
এখানে:
- accordion-title ক্লিক করলে সংশ্লিষ্ট accordion-content দেখানো বা লুকানো হবে।
- JS এর style.display প্রপার্টি ব্যবহার করে একে block বা none করা হচ্ছে, অর্থাৎ একে expand বা collapse করা হচ্ছে।
৪. Dynamic Dropdown Menu
Bulma এর dropdown কম্পোনেন্টটি সহজেই ডাইনামিকভাবে তৈরি এবং কন্ট্রোল করা যায়। আপনি JavaScript দিয়ে ড্রপডাউন মেনুর ভেতরে কনটেন্ট পরিবর্তন করতে বা ড্রপডাউন মেনুকে অটো খুলতে পারেন।
উদাহরণ: Dynamic Dropdown
<div class="dropdown" id="dropdownMenu">
<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" id="dropdown-items">
<!-- Dynamic content will be added here -->
</div>
</div>
</div>
<script>
// Open the dropdown
document.querySelector('.dropdown-trigger').addEventListener('click', function() {
document.getElementById('dropdownMenu').classList.toggle('is-active');
});
// Dynamically add items to the dropdown
const dropdownItems = [
'Item 1',
'Item 2',
'Item 3'
];
dropdownItems.forEach(function(item) {
const dropdownItem = document.createElement('a');
dropdownItem.classList.add('dropdown-item');
dropdownItem.textContent = item;
document.getElementById('dropdown-items').appendChild(dropdownItem);
});
</script>
এখানে:
- dropdown কম্পোনেন্টটি JS এর মাধ্যমে ডাইনামিকভাবে পরিচালিত হচ্ছে।
- JS এর মাধ্যমে dropdown-items এর ভেতরে আইটেমগুলো অ্যাড করা হচ্ছে এবং dropdown মেনুটি খুলতে toggle ক্লাস ব্যবহার করা হচ্ছে।
৫. Dynamic Grid Layout
Bulma এর Grid system ব্যবহার করে আপনি একটি ডাইনামিক গ্রিড তৈরি করতে পারেন, যেখানে JS এর মাধ্যমে columns যোগ বা মুছে ফেলা যাবে।
উদাহরণ: Dynamic Grid Layout
<div class="columns" id="grid-layout">
<!-- Dynamic content will be added here -->
</div>
<button class="button is-primary" id="add-column">Add Column</button>
<script>
document.getElementById('add-column').addEventListener('click', function() {
const column = document.createElement('div');
column.classList.add('column', 'is-one-quarter');
column.innerHTML = '<div class="box">New Column</div>';
document.getElementById('grid-layout').appendChild(column);
});
</script>
এখানে:
- columns কনটেইনারে নতুন column যোগ করা হচ্ছে যখন ইউজার Add Column বাটনে ক্লিক করবেন।
- নতুন column এর মধ্যে একটি box যোগ করা হয়েছে যা dynamic grid layout তৈরি করবে।
সারাংশ
Bulma ফ্রেমওয়ার্কের সাথে JavaScript ব্যবহার করে আপনি সহজেই ডাইনামিক কনটেন্ট তৈরি করতে পারেন। আপনি panel, modal, accordion, dropdown menu, এবং grid layout সহ বিভিন্ন UI উপাদান ডাইনামিকভাবে নিয়ন্ত্রণ করতে পারবেন। JS এর সাহায্যে Bulma এর কম্পোন
েন্টগুলোকে আরো ইন্টারেক্টিভ এবং কাস্টমাইজড করা সম্ভব, যা ইউজারের অভিজ্ঞতাকে উন্নত করে।
Read more
