صفحه بندی (Pagination)
صفحه بندی (Pagination) یعنی بخش بندی صفحات زیاد. مثل کتاب درسی. دکمه های «بعدی» و «قبلی» هم کمک می کنند. با CSS می توانیم ظاهرش را واکنش گرا و تمیز کنیم.
ساختار پایه صفحه بندی
معمولاً یک لیست بدون ترتیب داریم. هر لینک یک صفحه است. سپس با Flex وسط چین می کنیم.
.pagination {\n display: flex;\n justify-content: center;\n list-style: none;\n padding: 0px;\n}\n.pagination li a {\n display: block;\n padding: 8px 12px;\n text-decoration: none;\n border: 1px solid gray;\n color: black;\n margin: 0 4px;\n border-radius: 5px;\n}\nصفحه فعال با .active
برای نشان دادن صفحه فعلی، کلاس .active بگذار. رنگ پس زمینه را متفاوت کن.
.pagination li a.active {\n background-color: #4CAF50;\n color: white;\n}\nدکمه غیرفعال با .disabled
آخرین صفحه شدی؟ دکمه «بعدی» را غیرفعال کن. رویداد کلیک هم قطع شود.
.pagination li a.disabled {\n color: #dddddd;\n cursor: not-allowed;\n pointer-events: none;\n}\nافکت هاور روی آیتم ها
با :hover پس زمینه را کمی عوض کن. کاربر متوجه می شود قابل کلیک است.
.pagination li a:hover:not(.active) {\n background-color: lightgray;\n}\nترنزیشنِ نرم در هاور
transition تغییر رنگ را نرم می کند. تجربه کاربر بهتر می شود.
.pagination li a {\n display: block;\n padding: 8px 12px;\n text-decoration: none;\n border: 1px solid gray;\n color: black;\n margin: 0 4px;\n border-radius: 5px;\n transition: background-color 1s;\n}\nمسیرنما (Breadcrumb)
BreadCrumb مسیر شما را نشان می دهد. بین بخش ها جداکننده بگذار.
ul.breadcrumb {\n padding: 8px;\n list-style: none;\n background-color: #eee;\n}\nul.breadcrumb li {\n display: inline;\n}\nul.breadcrumb li a {\n color: green;\n}\nul.breadcrumb li+li:before {\n padding: 8px;\n color: black;\n content: "/\u00a0";\n}\nگام های عملی سریع
- لیست ul بساز و لینک ها را بچین.
- با Flex وسط چین و فاصله بده.
- .active و .disabled را اضافه کن.
- :hover و transition را تنظیم کن.
جمع بندی سریع
- صفحه بندی مسیر را ساده می کند.
- Flex چینش افقی می دهد.
- .active موقعیت فعلی را نشان می دهد.
- .disabled کلیک را می بندد.
- hover و transition تجربه را بهتر می کنند.