صفحه بندی با CSS (CSS Pagination)
در این راهنما «صفحه بندی با CSS» را گام به گام مرور می کنیم. صفحه بندی (Pagination) مجموعه ای از لینک هاست که کاربر را بین صفحات جابه جا می کند. سپس الگوی پایه، حالت فعال، غیرفعال، افکت هاور و نان بر (Breadcrumb) را می بینید.
الگوی پایه صفحه بندی
طبق منبع، صفحه بندی معمولاً یک فهرست نا مرتب <ul> با آیتم هایی است که هر کدام یک صفحه را نشان می دهند. همچنین کنترل های «قبلی» و «بعدی» وجود دارد. برای چیدمان افقی، از display: flex روی ظرف استفاده می شود و با justify-content: center دکمه ها وسط چین می شوند. برای ظاهر دکمه ها، ویژگی هایی مانند padding، border، text-decoration، color و border-radius روی تگ های <a> داخل <li> اعمال می گردد.
صفحه بندی با کلاس فعال (.active)
برای نشان دادن صفحه جاری، روی لینک مربوطه کلاس «.active» می گذارند تا با پس زمینه و رنگ متن متفاوت، وضعیت فعال مشخص شود.
صفحه بندی با کلاس غیرفعال (.disabled)
وقتی کاربر در آخرین صفحه است، دکمه «بعدی» باید غیرفعال باشد. برای این کار کلاس «.disabled» را اضافه می کنند و با تغییر color، cursor و pointer-events، امکان کلیک را از بین می برند.
افکت هاور و ترنزیشن
با شبه کلاس «:hover» می توان پس زمینه لینک ها را هنگام قرار گرفتن نشانگر تغییر داد. همچنین با transition روی لینک ها، تغییر رنگ پس زمینه در هاور نرم و تدریجی می شود.
نان بر (Breadcrumb)
نان بر گونه ای از صفحه بندی است که مسیر فعلی را نمایش می دهد. در این الگو آیتم ها به صورت درون خطی آمده و با جداکننده ای مانند «/» از هم تفکیک می شوند.
نکته: برای دسترس پذیری، اندازه ناحیه کلیک را کافی در نظر بگیرید و تفاوت رنگ/کنتراست لینک فعال را واضح تنظیم کنید.
مطالعه مرتبط درباره صفحه بندی با CSS
برای دکمه های کنترل صفحه بندی به استایل دکمه ها سر بزنید. همچنین ستون بندی محتوا با چندستونه ها می تواند کنار صفحه بندی تجربه بهتری بسازد.
MDN: :hover و MDN: transition توضیحات مرجع برای افکت های هاور و گذار ارائه می دهند.