Bulma CSS ফ্রেমওয়ার্কের দুটি গুরুত্বপূর্ণ কম্পোনেন্ট হলো Panel এবং Menu। এই কম্পোনেন্টগুলি UI ডিজাইনকে আরো ইন্টারেক্টিভ এবং সংগঠিত করার জন্য ব্যবহৃত হয়। এগুলোর মাধ্যমে আপনি আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনকে একটি পরিষ্কার, সুসংগঠিত এবং ব্যবহারকারী বান্ধব (user-friendly) আঙ্গিকে উপস্থাপন করতে পারবেন।
এই গাইডে, আমরা Panel এবং Menu কম্পোনেন্টের অ্যাডভান্সড ব্যবহার দেখব, যা আপনাকে আরো কাস্টমাইজড এবং দৃষ্টিনন্দন ডিজাইন তৈরি করতে সহায়তা করবে।
১. Panel Component
Panel কম্পোনেন্টটি সাধারণত সাইডবার, ফিল্টার প্যানেল, অথবা যেকোনো তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়। এটি বিভিন্ন অপশন বা ইনফর্মেশন গ্রুপের সাথে সহজে ব্যবহারযোগ্য হয়।
সাধারণ Panel Structure
<div class="panel">
<p class="panel-heading">
Panel Title
</p>
<div class="panel-block">
<p>Panel Block 1</p>
</div>
<div class="panel-block">
<p>Panel Block 2</p>
</div>
<div class="panel-block">
<p>Panel Block 3</p>
</div>
<p class="panel-tabs">
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<a href="#">Tab 3</a>
</p>
</div>
এখানে:
- panel: এটি প্যানেলের মূল কনটেইনার।
- panel-heading: প্যানেলের শিরোনাম (header)।
- panel-block: প্যানেলের মূল ব্লক, যেখানে আপনি আপনার কন্টেন্ট বা অপশনগুলো রাখবেন।
- panel-tabs: প্যানেলের নিচে ট্যাব প্রদর্শন করার জন্য ব্যবহৃত হয়।
২. Panel এর অ্যাডভান্সড কাস্টমাইজেশন
Bulma এর Panel কম্পোনেন্টটি আরও কাস্টমাইজড এবং ইন্টারেক্টিভ করার জন্য কিছু অতিরিক্ত ক্লাস এবং বৈশিষ্ট্য ব্যবহার করা যায়।
Panel with Icons
আপনি icons যোগ করে প্যানেলকে আরো ইন্টারেক্টিভ এবং দৃষ্টিনন্দন করতে পারেন।
<div class="panel">
<p class="panel-heading">
<span class="icon is-small">
<i class="fas fa-cogs"></i>
</span>
Settings
</p>
<div class="panel-block">
<a href="#">Option 1</a>
</div>
<div class="panel-block">
<a href="#">Option 2</a>
</div>
</div>
এখানে:
- icon is-small: আইকনকে ছোট আকারে প্রদর্শন করবে।
- fas fa-cogs: Font Awesome আইকন ব্যবহার করেছে প্যানেলের শিরোনামে।
Panel with Collapse/Toggle
আপনি JavaScript ব্যবহার করে প্যানেলকে collapse বা toggle করতে পারেন।
<div class="panel">
<p class="panel-heading">
Collapsible Panel
</p>
<div class="panel-block is-collapsible">
<a href="#" class="toggle-panel">Toggle Panel</a>
<div class="panel-content" style="display: none;">
<p>More content inside the panel...</p>
</div>
</div>
</div>
<script>
document.querySelector('.toggle-panel').addEventListener('click', function(event) {
const panelContent = this.nextElementSibling;
panelContent.style.display = (panelContent.style.display === 'none' ? 'block' : 'none');
});
</script>
এখানে:
- panel-block is-collapsible: এটি প্যানেল ব্লকটি টগলেবল (বিস্তারিত দেখানোর/লুকানোর জন্য) করবে।
- JavaScript ব্যবহার করা হয়েছে প্যানেলটির কন্টেন্টকে toggle করতে।
৩. Menu Component
Menu কম্পোনেন্টটি সাধারণত সাইডবার মেনু, নেভিগেশন মেনু বা অ্যাকশন মেনু হিসেবে ব্যবহৃত হয়। Bulma এর Menu কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজে ইন্টারেক্টিভ এবং রেসপনসিভ মেনু তৈরি করতে পারবেন।
সাধারণ Menu Structure
<aside class="menu">
<p class="menu-label">
Main Navigation
</p>
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<p class="menu-label">
Settings
</p>
<ul class="menu-list">
<li><a href="#">Account</a></li>
<li><a href="#">Privacy</a></li>
</ul>
</aside>
এখানে:
- menu: এটি মেনুর মূল কনটেইনার।
- menu-label: মেনুর বিভাগ বা সেকশনের শিরোনাম।
- menu-list: মেনুর আইটেমের তালিকা।
৪. Menu এর অ্যাডভান্সড কাস্টমাইজেশন
Bulma এর Menu কম্পোনেন্টটি আরও কাস্টমাইজ এবং ইন্টারেক্টিভ করার জন্য আপনি কিছু অতিরিক্ত ফিচার ব্যবহার করতে পারেন।
Menu with Icons
মেনু আইটেমে icons যোগ করে আপনি মেনুটিকে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ করতে পারেন।
<aside class="menu">
<p class="menu-label">
<span class="icon is-small">
<i class="fas fa-home"></i>
</span>
Home
</p>
<ul class="menu-list">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Analytics</a></li>
</ul>
</aside>
এখানে:
- icon is-small: আইকনটি ছোট আকারে প্রদর্শিত হবে।
- fas fa-home: Font Awesome আইকন যোগ করা হয়েছে।
Nested Menu
আপনি মেনুর মধ্যে nested menu ব্যবহার করে সাবমেনু তৈরি করতে পারেন।
<aside class="menu">
<p class="menu-label">
Main Menu
</p>
<ul class="menu-list">
<li><a href="#">Option 1</a></li>
<li>
<a href="#">Option 2</a>
<ul>
<li><a href="#">Sub Option 1</a></li>
<li><a href="#">Sub Option 2</a></li>
</ul>
</li>
<li><a href="#">Option 3</a></li>
</ul>
</aside>
এখানে:
- nested menu তৈরি করা হয়েছে, যেখানে Sub Option গুলো একটি আলাদা ul তালিকার মধ্যে রাখা হয়েছে।
Menu with Toggle
JavaScript ব্যবহার করে আপনি menu টিকে toggle (আন/অন) করতে পারেন।
<aside class="menu">
<p class="menu-label">
Navigation
</p>
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
<button class="button toggle-menu">Toggle Menu</button>
</aside>
<script>
document.querySelector('.toggle-menu').addEventListener('click', function() {
document.querySelector('.menu').classList.toggle('is-hidden');
});
</script>
এখানে:
- toggle-menu বাটন ক্লিক করলে মেনুর দৃশ্যমানতা পরিবর্তন হবে, অর্থাৎ মেনুটি toggle হবে।
৫. Panel এবং Menu এর জন্য Responsive Design
Bulma CSS ফ্রেমওয়ার্কে Panel এবং Menu কম্পোনেন্টগুলি স্বাভাবিকভাবেই responsive। আপনি এগুলোর রেসপনসিভ ডিজাইন কাস্টমাইজ করতে media queries এবং Bulma এর is-hidden-mobile, is-hidden-tablet, is-hidden-desktop ইত্যাদি ক্লাস ব্যবহার করতে পারেন।
উদাহরণ (Responsive Panel):
<div class="panel is-hidden-mobile">
<p class="panel-heading">
Panel Visible on Desktop Only
</p>
<div class="panel-block">
<p>Content visible only on large screens.</p>
</div>
</div>
এখানে:
- is-hidden-mobile: এটি মোবাইল স্ক্রীনে প্যানেলটি লুকিয়ে রাখবে, কিন্তু বড় স্ক্রীনে এটি প্রদর্শিত হবে।
সারাংশ
Bulma এর Panel এবং **Menu
** কম্পোনেন্টগুলো ব্যবহার করে আপনি অত্যন্ত কার্যকর এবং স্টাইলিশ UI ডিজাইন তৈরি করতে পারেন। এগুলোর কাস্টমাইজেশন এবং অ্যাডভান্সড ব্যবহার যেমন icons, nested items, toggle functionality, এবং responsive design আপনাকে আরো ইন্টারেক্টিভ এবং ব্যবহারকারী বান্ধব (user-friendly) ওয়েব পেজ ডিজাইন করতে সাহায্য করবে। Bulma এর helper classes এবং ফ্লেক্সবক্স সিস্টেম ব্যবহার করে আপনি এই কম্পোনেন্টগুলিকে আরও সুন্দরভাবে কাস্টমাইজ করতে পারবেন।
Read more
