Документация жана мисалдар бир нече беттерде тиешелүү мазмундун сериясы бар экенин көрсөтүү үчүн баракчаларды көрсөтүү үчүн.
Обзор
Биз баракчаларыбыз үчүн туташкан шилтемелердин чоң блогун колдонобуз, бул шилтемелерди өткөрүп жиберүүнү кыйындатат жана оңой масштабдалат — мунун баары чоң хит аймактарды камсыз кылат. Беттештирүү тизме HTML элементтери менен курулган, андыктан экрандагы окурмандар жеткиликтүү шилтемелердин санын жарыялай алышат. <nav>Окурмандарды жана башка жардамчы технологияларды экранга чыгаруу үчүн навигация бөлүмү катары аныктоо үчүн таңуу элементин колдонуңуз .
Кошумчалай кетсек, барактарда бирден ашык навигация бөлүмдөрү бар болгондуктан, анын максатын чагылдыруу үчүн сыпаттама aria-labelберүү сунушталат . <nav>Мисалы, пагинация компоненти издөө натыйжаларынын топтому арасында өтүү үчүн колдонулса, тиешелүү энбелги болушу мүмкүн aria-label="Search results pages".
Иконалар менен иштөө
Кээ бир барактоо шилтемелери үчүн тексттин ордуна сөлөкөтүн же символду колдонгуңуз келеби? ariaАтрибуттары менен экранды окууга туура колдоо көрсөтүүнү унутпаңыз .
Өчүрүлгөн жана активдүү мамлекеттер
Пагинация шилтемелери ар кандай жагдайлар үчүн ыңгайлаштырылган. Чыкылбай .disabledтурган шилтемелер үчүн жана .activeучурдагы баракты көрсөтүү үчүн колдонуңуз.
.disabledКласс s шилтемесинин функционалдуулугун өчүрүүгө pointer-events: noneаракет кылып жатканда <a>, ал CSS касиети стандартташтырылган эмес жана клавиатурада навигацияны эсепке албайт. Ошентип, сиз ар дайым tabindex="-1"өчүрүлгөн шилтемелерди кошуп, алардын функцияларын толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScript колдонушуңуз керек.
Каалоочулар үчүн жигердүү же өчүрүлгөн анкерлерди алмаштыра аласыз <span>, же мурунку/кийинки жебелер болгон учурда анкерди өткөрүп жиберсеңиз болот, чыкылдатуу функциясын алып салуу жана клавиатура фокусунун алдын алуу үчүн арналган стилдерди сактап калуу.
Өлчөмү
Чоңураак же кичирээк беттештирүүнү каалайсызбы? Кошумча .pagination-lgже .pagination-smкошумча өлчөмдөр үчүн.
Тегиздөө
Беттештирүү компоненттеринин тегиздөөсүн flexbox утилиталары менен өзгөртүңүз .