Framework7 একটি শক্তিশালী ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা অ্যাপ্লিকেশনে প্রয়োজনীয় অনেক প্রি-বিল্ট UI উপাদান (components) প্রদান করে। এদের মধ্যে Accordion, Tabs, এবং Cards অন্যতম। এগুলো ব্যবহার করে আপনি সহজেই আপনার অ্যাপ্লিকেশনের ইন্টারফেস উন্নত করতে পারেন।
Accordion Component
Accordion এমন একটি উপাদান যা ব্যবহারকারীদের কন্টেন্ট গ্রুপ করতে এবং তা এক্সপ্যান্ড বা কোল্যাপ্স করার সুবিধা দেয়।
উদাহরণ:
<div class="accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Accordion Item 1</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>এই কন্টেন্টটি Accordion Item 1 এর জন্য।</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Accordion Item 2</div>
</div>
</a>
<div class="accordion-item-content">
<div class="block">
<p>এই কন্টেন্টটি Accordion Item 2 এর জন্য।</p>
</div>
</div>
</li>
</ul>
</div>
কাস্টমাইজেশন:
- আপনি
accordion-item-openedক্লাস যোগ করে ডিফল্টভাবে একটি আইটেম খোলা রাখতে পারেন। - CSS ব্যবহার করে স্টাইল পরিবর্তন করতে পারেন।
Tabs Component
Tabs ব্যবহার করে একই স্ক্রিনে বিভিন্ন কন্টেন্ট গ্রুপ করার সুবিধা পাওয়া যায়, যেখানে প্রতিটি ট্যাব আলাদা কন্টেন্ট প্রদর্শন করে।
উদাহরণ:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
<a href="#tab-2" class="tab-link">Tab 2</a>
<a href="#tab-3" class="tab-link">Tab 3</a>
</div>
</div>
<div class="tabs">
<div id="tab-1" class="tab tab-active">
<div class="block">
<p>এই কন্টেন্টটি Tab 1 এর জন্য।</p>
</div>
</div>
<div id="tab-2" class="tab">
<div class="block">
<p>এই কন্টেন্টটি Tab 2 এর জন্য।</p>
</div>
</div>
<div id="tab-3" class="tab">
<div class="block">
<p>এই কন্টেন্টটি Tab 3 এর জন্য।</p>
</div>
</div>
</div>
বৈশিষ্ট্য:
tab-link-activeক্লাস দিয়ে ডিফল্টভাবে সক্রিয় ট্যাব নির্বাচন করা হয়।tab-activeক্লাস ব্যবহার করে ডিফল্ট কন্টেন্ট প্রদর্শন করতে পারেন।
Cards Component
Cards ব্যবহারকারীদের তথ্য বা কন্টেন্ট ব্লকের একটি সুন্দর উপস্থাপনা প্রদান করে। এটি প্রোডাক্ট লিস্ট, নিউজ ফিড, বা অন্যান্য ডেটা উপস্থাপনার জন্য ব্যবহৃত হয়।
উদাহরণ:
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-content">
<div class="card-content-inner">
<p>এটি একটি কার্ডের কন্টেন্ট। এখানে আপনি ডেটা বা টেক্সট প্রদর্শন করতে পারেন।</p>
</div>
</div>
<div class="card-footer">Card Footer</div>
</div>
ইমেজ সহ কার্ড উদাহরণ:
<div class="card">
<div class="card-header">Awesome Picture</div>
<div class="card-content">
<img src="https://via.placeholder.com/500" alt="Card Image" style="width: 100%;">
<div class="card-content-inner">
<p>এই কার্ডের মধ্যে একটি ইমেজ রয়েছে।</p>
</div>
</div>
<div class="card-footer">Card Footer</div>
</div>
সব কম্পোনেন্ট একসঙ্গে ব্যবহার
Framework7 এর Accordion, Tabs, এবং Cards একসাথে ব্যবহার করলে আপনার অ্যাপ আরও বেশি ইন্টারেক্টিভ এবং আকর্ষণীয় হয়ে উঠবে।
উদাহরণ:
<div class="accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Accordion with Tabs</div>
</div>
</a>
<div class="accordion-item-content">
<div class="tabs">
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
<a href="#tab-2" class="tab-link">Tab 2</a>
</div>
</div>
<div id="tab-1" class="tab tab-active">
<div class="block">
<p>Tab 1 এর কন্টেন্ট।</p>
</div>
</div>
<div id="tab-2" class="tab">
<div class="card">
<div class="card-header">Card in Tab 2</div>
<div class="card-content">
<p>Tab 2 এর মধ্যে একটি কার্ড প্রদর্শিত হচ্ছে।</p>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Framework7 এর Accordion, Tabs, এবং Cards কম্পোনেন্ট অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং ব্যবহারবান্ধব করে তোলে। এই কম্পোনেন্টগুলো সহজেই কাস্টমাইজ করা যায় এবং অ্যাপ্লিকেশনে একটি প্রফেশনাল লুক নিয়ে আসে। এগুলো ব্যবহার করে আপনার Framework7 অ্যাপ উন্নত করুন।
Read more
