Bulma-তে Tabs Component একটি জনপ্রিয় উপাদান, যা ওয়েব পেজে বিভিন্ন কন্টেন্টের মধ্যে নেভিগেশন বা ভিউ সোইচিং সুবিধা প্রদান করে। এটি সাধারণত কিছু ট্যাবের মধ্যে আলাদা আলাদা কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়, যাতে ব্যবহারকারী সহজেই এক ট্যাব থেকে অন্য ট্যাবে সুইচ করতে পারে।
Bulma তে ট্যাব কম্পোনেন্টটি খুবই সহজ এবং ব্যবহারযোগ্য, এবং আপনি static ও dynamic ট্যাব কন্টেন্ট তৈরি করতে পারেন।
১. Basic Tabs Component
Bulma তে Tabs তৈরি করতে tabs ক্লাস ব্যবহার করা হয়। একটি সাধারণ ট্যাব কম্পোনেন্টের মধ্যে is-active ক্লাস ব্যবহার করে সক্রিয় ট্যাব হাইলাইট করা হয়।
উদাহরণ: Basic Tabs
<div class="tabs is-centered">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-1-content">
<h2>Content for Tab 1</h2>
<p>This is the content of Tab 1</p>
</div>
<div class="tab-2-content" style="display: none;">
<h2>Content for Tab 2</h2>
<p>This is the content of Tab 2</p>
</div>
<div class="tab-3-content" style="display: none;">
<h2>Content for Tab 3</h2>
<p>This is the content of Tab 3</p>
</div>
</div>
এখানে:
tabs: ট্যাব কম্পোনেন্টের জন্য কন্টেইনার।is-centered: ট্যাবগুলোকে সেন্টারে অ্যালাইন করা হয়।is-active: এই ক্লাসটি সক্রিয় (এ্যাকটিভ) ট্যাব চিহ্নিত করে।tab-content: ট্যাবের কন্টেন্ট ধারণ করার জন্য কন্টেইনার।tab-1-content,tab-2-content,tab-3-content: প্রতিটি ট্যাবের কন্টেন্ট সেকশন।
২. Dynamic Tab Content
Dynamic Tab Content তৈরি করতে JavaScript ব্যবহার করা হয়, যাতে ট্যাব সুইচ করার সময় সংশ্লিষ্ট কন্টেন্টটি দেখানো বা লুকানো যায়। এই ক্ষেত্রে, ব্যবহারকারীর ক্লিকের উপর ভিত্তি করে কন্টেন্ট পরিবর্তন হবে এবং অন্যান্য ট্যাবগুলোর কন্টেন্ট লুকিয়ে যাবে।
উদাহরণ: Dynamic Tab Content with JavaScript
<div class="tabs is-centered">
<ul>
<li class="is-active" id="tab-1"><a>Tab 1</a></li>
<li id="tab-2"><a>Tab 2</a></li>
<li id="tab-3"><a>Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-1-content">
<h2>Content for Tab 1</h2>
<p>This is the content of Tab 1</p>
</div>
<div class="tab-2-content" style="display: none;">
<h2>Content for Tab 2</h2>
<p>This is the content of Tab 2</p>
</div>
<div class="tab-3-content" style="display: none;">
<h2>Content for Tab 3</h2>
<p>This is the content of Tab 3</p>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tabs ul li');
const contents = document.querySelectorAll('.tab-content div');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// Remove 'is-active' class from all tabs
tabs.forEach(tab => tab.classList.remove('is-active'));
// Hide all tab content
contents.forEach(content => content.style.display = 'none');
// Add 'is-active' class to clicked tab
tab.classList.add('is-active');
// Display the content for the clicked tab
const tabId = tab.id;
document.querySelector(`.${tabId}-content`).style.display = 'block';
});
});
</script>
এখানে:
tabs: সমস্ত ট্যাব এলিমেন্টের জন্য ডকুমেন্ট নির্বাচন করা হয়েছে।contents: সমস্ত ট্যাব কন্টেন্ট এলিমেন্ট নির্বাচন করা হয়েছে।addEventListener('click'): প্রতিটি ট্যাবের উপর ক্লিক হলে কন্টেন্ট স্যুইচিং ঘটে।style.display = 'none': অব্যবহৃত ট্যাব কন্টেন্ট লুকানো হয়।style.display = 'block': নির্বাচিত ট্যাবের কন্টেন্ট প্রদর্শিত হয়।
৩. Styling Tabs
Bulma তে Tabs এর স্টাইলিং কাস্টমাইজ করা যায়, যেমন ট্যাবের রঙ, সাইজ, অবস্থান ইত্যাদি। আপনি ক্লাসের মাধ্যমে ট্যাবগুলোর উপস্থিতি পরিবর্তন করতে পারেন, যেমন is-small, is-medium, is-large, is-rounded ইত্যাদি।
উদাহরণ: Customized Tabs with Bulma
<div class="tabs is-boxed is-small is-centered">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-1-content">
<h2>Content for Tab 1</h2>
<p>This is the content of Tab 1</p>
</div>
<div class="tab-2-content" style="display: none;">
<h2>Content for Tab 2</h2>
<p>This is the content of Tab 2</p>
</div>
<div class="tab-3-content" style="display: none;">
<h2>Content for Tab 3</h2>
<p>This is the content of Tab 3</p>
</div>
</div>
এখানে:
is-boxed: ট্যাবের চারপাশে বক্সড এফেক্ট যোগ করা হয়।is-small: ট্যাবগুলোর আকার ছোট করা হয়।is-centered: ট্যাবগুলো সেন্টারে অ্যালাইন করা হয়।
৪. Responsive Tabs
Bulma তে Responsive Tabs তৈরি করা খুব সহজ। আপনি is-mobile, is-tablet, is-desktop ক্লাসের মাধ্যমে ট্যাবের জন্য বিভিন্ন আকার নির্ধারণ করতে পারেন, যাতে মোবাইল, ট্যাবলেট এবং ডেস্কটপে ট্যাবগুলো সঠিকভাবে প্রদর্শিত হয়।
উদাহরণ: Responsive Tabs
<div class="tabs is-centered is-mobile is-boxed">
<ul>
<li class="is-active"><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-1-content">
<h2>Content for Tab 1</h2>
<p>This is the content of Tab 1</p>
</div>
<div class="tab-2-content" style="display: none;">
<h2>Content for Tab 2</h2>
<p>This is the content of Tab 2</p>
</div>
<div class="tab-3-content" style="display: none;">
<h2>Content for Tab 3</h2>
<p>This is the content of Tab 3</p>
</div>
</div>
এখানে:
is-mobile: মোবাইল ডিভাইসের জন্য ট্যাবগুলোকে আরও উপযুক্ত করে তৈরি করা হয়েছে।is-boxed: ট্যাবের চারপাশে বক্সড স্টাইল যোগ করা হয়েছে।
সারাংশ
Bulma তে Tabs Component খুবই কার্যকরী এবং সহজে কাস্টমাইজযোগ্য। আপনি static ট্যাব কন্টেন্টের সাথে dynamic ট্যাব কন্টেন্ট তৈরি করতে পারেন, যেখানে JavaScript ব্যবহার করে ট্যাব পরিবর্তন করার সময় কন্টেন্ট স্যুইচিং হয়। Bulma এর ট্যাব কম্পোনেন্টে বিভিন্ন স্টাইল এবং রেসপনসিভ বৈশিষ্ট্য রয়েছে,
যা আপনাকে ট্যাবগুলির আকার, রঙ এবং স্থানাঙ্ক নিয়ন্ত্রণ করতে সহায়তা করে।
Read more
