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