Bulma-তে Pagination কম্পোনেন্টটি ব্যবহার করা হয় বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেট করার জন্য। এটি সাধারণত বড় লিস্ট বা ডেটার জন্য ব্যবহার করা হয় যেখানে ইউজারকে একাধিক পৃষ্ঠার মধ্যে নেভিগেট করতে হয়, যেমন ব্লগ পোস্ট, পণ্য তালিকা, সার্চ রেজাল্ট ইত্যাদি। Bulma-তে Pagination কম্পোনেন্টটি খুব সহজে কাস্টমাইজ করা যায় এবং ব্যবহারকারীদের জন্য একটি পরিষ্কার, ইন্টারেক্টিভ এবং রেসপনসিভ পৃষ্ঠা নেভিগেশন ব্যবস্থা তৈরি করতে সহায়ক।
১. Pagination Structure (পেজিনেশন গঠন)
Bulma-তে Pagination কম্পোনেন্টটি একটি pagination ক্লাস দিয়ে শুরু হয়, এবং এর মধ্যে বিভিন্ন লিঙ্ক থাকে যা পৃষ্ঠা পরিবর্তন করতে সহায়ক হয়। সাধারণভাবে এটি pagination-list, pagination-link এবং বিভিন্ন পৃষ্ঠার জন্য pagination-previous এবং pagination-next ক্লাস ধারণ করে।
২. Basic Pagination Example (বেসিক পেজিনেশন উদাহরণ)
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#" disabled>Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link is-current" href="#">1</a></li>
<li><a class="pagination-link" href="#">2</a></li>
<li><a class="pagination-link" href="#">3</a></li>
</ul>
</nav>
এখানে:
pagination: এটি পেজিনেশন কম্পোনেন্টের কন্টেইনার।pagination-previous: পূর্ববর্তী পৃষ্ঠার লিঙ্ক।pagination-next: পরবর্তী পৃষ্ঠার লিঙ্ক।pagination-list: পৃষ্ঠাগুলির লিস্ট।pagination-link: প্রতিটি পৃষ্ঠার জন্য লিঙ্ক।
৩. Pagination with Disabled State (ডিসেবলড স্টেট সহ পেজিনেশন)
কখনও কখনও, একটি নির্দিষ্ট পৃষ্ঠা পাওয়া না গেলে বা আগের বা পরের পৃষ্ঠা অ্যাক্সেসযোগ্য না হলে, আপনাকে পেজিনেশন লিঙ্কগুলোকে ডিসেবলড (অকার্যকর) করতে হতে পারে। Bulma-তে আপনি disabled অ্যাট্রিবিউট ব্যবহার করে এই ফিচারটি অ্যাক্টিভেট করতে পারেন।
উদাহরণ: Disabled Pagination Link
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#" disabled>Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><a class="pagination-link is-current" href="#">2</a></li>
<li><a class="pagination-link" href="#">3</a></li>
</ul>
</nav>
এখানে:
disabledঅ্যাট্রিবিউট ব্যবহার করে আগের পৃষ্ঠার লিঙ্কটি অকার্যকর করা হয়েছে।
৪. Pagination with More Pages (আরও পৃষ্ঠা সহ পেজিনেশন)
যখন আপনার পৃষ্ঠা সংখ্যা বেশি হয়, তখন আপনি pagination-ellipsis ক্লাস ব্যবহার করে আরো পৃষ্ঠা লুকিয়ে রাখতে পারেন, যাতে পেজিনেশন কম্পোনেন্টটি আরও compact থাকে। এটি ইউজারকে অনেক পৃষ্ঠা দেখানোর পরিবর্তে এক্সট্রা পৃষ্ঠা লুকিয়ে রাখার সুবিধা দেয়।
উদাহরণ: Pagination with Ellipsis
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#">Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><span class="pagination-ellipsis">…</span></li>
<li><a class="pagination-link" href="#">15</a></li>
</ul>
</nav>
এখানে:
pagination-ellipsis: এটি পেজিনেশন লিস্টে অতিরিক্ত পৃষ্ঠাগুলোর মধ্যে বিরতি প্রদর্শন করতে ব্যবহৃত হয় (যেমন, পৃষ্ঠা ১ থেকে পৃষ্ঠা ১৫ পর্যন্ত যদি মধ্যবর্তী পৃষ্ঠাগুলি লুকিয়ে রাখতে চান)।
৫. Pagination with Size Modifiers (সাইজ মডিফায়ার সহ পেজিনেশন)
Bulma-তে পেজিনেশন কম্পোনেন্টটির আকার পরিবর্তন করার জন্য is-small এবং is-large ক্লাস ব্যবহার করা যেতে পারে। এটি কম্পোনেন্টের আকার ছোট বা বড় করার জন্য ব্যবহৃত হয়।
উদাহরণ: Small and Large Pagination
<nav class="pagination is-small" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#">Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><a class="pagination-link" href="#">2</a></li>
<li><a class="pagination-link is-current" href="#">3</a></li>
</ul>
</nav>
<nav class="pagination is-large" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#">Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><a class="pagination-link" href="#">2</a></li>
<li><a class="pagination-link is-current" href="#">3</a></li>
</ul>
</nav>
এখানে:
is-small: ছোট আকারের পেজিনেশন।is-large: বড় আকারের পেজিনেশন।
৬. Pagination with Center Alignment (মধ্যস্থল সজ্জিত পেজিনেশন)
Bulma-তে পেজিনেশন কম্পোনেন্টকে center করে সজ্জিত করা খুবই সহজ। আপনি is-centered ক্লাস ব্যবহার করে এটি করতে পারেন।
উদাহরণ: Centered Pagination
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#">Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><a class="pagination-link" href="#">2</a></li>
<li><a class="pagination-link is-current" href="#">3</a></li>
</ul>
</nav>
এখানে:
is-centered: পেজিনেশন কম্পোনেন্টটিকে মধ্যস্থলে স্থানান্তরিত করে।
৭. Pagination with Right Alignment (ডানদিকে সজ্জিত পেজিনেশন)
আপনি চাইলে is-right ক্লাস ব্যবহার করে পেজিনেশন কম্পোনেন্টটিকে ডানদিকে সজ্জিত করতে পারেন।
উদাহরণ: Right-Aligned Pagination
<nav class="pagination is-right" role="navigation" aria-label="pagination">
<a class="pagination-previous" href="#">Previous</a>
<a class="pagination-next" href="#">Next</a>
<ul class="pagination-list">
<li><a class="pagination-link" href="#">1</a></li>
<li><a class="pagination-link" href="#">2</a></li>
<li><a class="pagination-link is-current" href="#">3</a></li>
</ul>
</nav>
এখানে:
is-right: পেজিনেশন কম্পোনেন্টটিকে ডানদিকে স্থানান্তরিত করে।
সারাংশ
Bulma-তে Pagination কম্পোনেন্টটি বিভিন্ন পৃষ্ঠার মধ্যে নেভিগেশন করার জন্য ব্যবহার করা হয়। এটি previous এবং next পৃষ্ঠার লিঙ্ক, pagination-link লিঙ্ক, এবং বিভিন্ন pagination-ellipsis ফিচারসহ কাস্টমাইজ করা যায়। এছাড়া, small ও large সাইজ, centered এবং right-aligned স্টাইলসহ পেজিনেশন কম্পোনেন্টটিকে বিভিন্নভাবে সাজানো সম্ভব। Disabled লিঙ্ক এবং ellipsis ব্যবহারের মাধ্যমে আপনি একটি বেশি ব্যবহারকারী-বান্ধব পেজিনেশন তৈরি করতে পারেন। Bulma-র এই ফিচারগুলি আপনাকে সহজে নেভিগেশন সিস্টেম তৈরি করতে সহায়তা করে।
Read more
