تم تاریک
پیجینیشن Pagination
Pagination کامپوننتی برای مدیریت و جابهجایی بین صفحات مختلف محتوا است و زمانی استفاده میشود که حجم دادهها یا آیتمها بیشتر از ظرفیت نمایش در یک صفحه باشد. این کامپوننت به کاربر کمک میکند تا بتواند بین صفحات قبلی و بعدی حرکت کند، مستقیم یک صفحه مشخص را انتخاب کند یا تعداد آیتمهای قابل نمایش در هر صفحه را تغییر دهد.
Pagination بهشکل معمول در جدولها، لیستها و صفحات دارای آیتمهای زیاد استفاده میشود تا محتوا به بخشهای قابلفهمتر و قابلمدیریتتر تقسیم شود. هدف اصلی این کامپوننت، سادهتر کردن مرور اطلاعات و حفظ خوانایی و عملکرد رابط کاربری در مواجهه با حجم بالای داده است.
نمونه زنده
Go to
آناتومی
- کانتینر پیجینیشن (Pagination Container): کانتینر اصلی که مجموعه کنترلهای جابهجایی بین صفحات را در بر میگیرد.
- آیتم صفحه (Page Item): آیتمی برای نمایش و انتخاب یک شماره صفحه مشخص.
- صفحه فعال (Active Page): صفحهای که در حال حاضر انتخاب شده و محتوای مرتبط با آن نمایش داده میشود.
- دکمه صفحه قبلی (Previous Page Button): دکمهای برای جابهجایی به صفحه قبلی.
- دکمه صفحه بعدی (Next Page Button): دکمهای برای جابهجایی به صفحه بعدی.
- سهنقطه (Ellipsis): نشاندهنده وجود صفحات بیشتر بین آیتمهای نمایشدادهشده است.
- تعداد آیتم در هر صفحه (Items Per Page): دراپداونی برای انتخاب تعداد آیتمهای قابل نمایش در هر صفحه.
- پرش سریع (Quick Jumper): ورودی اختیاری برای انتقال مستقیم کاربر به یک صفحه مشخص.
ساختار
کامپوننت Pagination از سه بخش اصلی تشکیل شده است: بخش جابهجایی بین صفحات، انتخاب تعداد آیتم در هر صفحه و Quick Jumper. بخش اصلی شامل شماره صفحات، دکمههای Previous و Next و در صورت نیاز Ellipsis (...) برای مدیریت تعداد زیاد صفحات است.
دکمههای Previous و Next همیشه در ساختار Pagination حضور دارند، اما بسته به موقعیت کاربر میتوانند در حالت Disabled قرار بگیرند؛ برای مثال در صفحه اول، صفحه آخر یا زمانی که فقط یک صفحه وجود دارد.
در بخش Pagination، حداکثر ۷ آیتم (با درنظر گرفتن Ellipsis) بهصورت همزمان نمایش داده میشود تا ساختار کامپوننت خوانا و قابل اسکن باقی بماند. همچنین بخش Quick Jumper به طور کامل اختیاری است و در صورت نیاز میتواند به ساختار کامپوننت اضافه یا از آن حذف شود.
| موضوع | مقدار |
|---|---|
ارتفاع کلی Pagination | 40px |
حداقل عرض هر Page Item | 32px |
فاصله بین آیتمهای Pagination | 8px |
| فاصله بین اجزای اصلی | 16px |
حداکثر تعداد آیتم قابل نمایش در Pagination | 7 |
چیدمان
Pagination بهشکل معمول در انتهای جدولها، لیستها یا بخشهای دارای دادههای چندصفحهای قرار میگیرد تا مسیر حرکت بین صفحات برای کاربر قابل پیشبینی و در دسترس باشد.
کنترلهای جابهجایی، شماره صفحات و بخشهای کمکی مانند Items Per Page و Quick Jumper باید بهصورت منسجم و قابل اسکن در کنار یکدیگر نمایش داده شوند تا کاربر بتواند بدون سردرگمی بین صفحات حرکت کند یا تعداد آیتمهای قابل نمایش در صفحه را تغییر دهد.
در سناریوهای دارای تعداد صفحات زیاد، استفاده از Ellipsis (...) باعث میشود ساختار Pagination فشرده، خوانا و قابل مدیریت باقی بماند. همچنین در نسخههای محدودتر یا موبایل، میتوان بخشهایی مانند Quick Jumper را حذف کرد تا تمرکز روی ناوبری اصلی حفظ شود.
همترازی
Pagination باید بهگونهای تراز شود که ارتباط آن با جدول یا لیست داده واضح باشد. در اغلب سناریوها، کنترل اصلی جابهجایی بین صفحات در مرکز قرار میگیرد تا کاربر بتواند سریعتر وضعیت صفحه فعلی و مسیر حرکت را تشخیص دهد.
بخشهای کمکی مانند Items Per Page و Quick Jumper میتوانند در دو سمت Pagination قرار بگیرند تا کنترل اصلی خلوت و قابل اسکن باقی بماند. در چیدمانهای محدودتر، این بخشها میتوانند حذف شوند یا در یک ردیف جداگانه قرار بگیرند.
سلسلهمراتب
در Pagination، مهمترین بخش، کنترل اصلی جابهجایی بین صفحات است؛ یعنی شماره صفحات، صفحه فعال و دکمههای Previous و Next. این بخش باید بیشترین وضوح بصری را داشته باشد تا کاربر بتواند سریع موقعیت فعلی خود را تشخیص دهد و بین صفحات حرکت کند.
بخشهای کمکی مانند Items Per Page و Quick Jumper اهمیت پایینتری دارند و نباید از نظر بصری با کنترل اصلی Pagination رقابت کنند. این بخشها باید در کنار کامپوننت قرار بگیرند، اما تمرکز اصلی همچنان روی صفحه فعال و مسیر جابهجایی بین صفحات باقی بماند.
نسبت به جدول، Pagination باید بعد از محتوای جدول قرار بگیرد و بهعنوان کنترل پایانی برای مرور دادهها عمل کند. جایگذاری آن باید بهگونهای باشد که کاربر پس از مشاهده ردیفهای جدول، بهراحتی بتواند ادامه دادهها را دنبال کند یا تعداد آیتمهای نمایشدادهشده را تغییر دهد.