SourcePagination
Zvinyorwa uye mienzaniso yekuratidza pagination kuratidza nhevedzano yezvinyorwa zvinoenderana iripo pamapeji akawanda.
Isu tinoshandisa bhuroka hombe yezvibatanidza zvakabatanidzwa kune yedu pagination, zvichiita kuti zvinongedzo zviome kupotsa uye nyore scalable — zvese tichipa nzvimbo dzakakura dzakarova. Pagination inovakwa nerondedzero HTML zvinhu kuitira kuti vaverengi vescreen vazivise huwandu hweanowanikwa malink. Shandisa chinhu chekuputira <nav>
kuti uzviratidze sechikamu chekufambisa kune vanoverenga skrini uye humwe hunyanzvi hwekubatsira.
Pamusoro pezvo, sezvo mapeji angangove aine chikamu chimwe chete chekufamba chakadaro, zvinokurudzirwa kupa tsananguro aria-label
yekuti <nav>
iratidze chinangwa chayo. Semuyenzaniso, kana chikamu chepejination chikashandiswa kufamba pakati peseti yezviwanikwa zvekutsvaga, zita rakakodzera rinogona kunge riri aria-label="Search results pages"
.
Kutsvaga kushandisa icon kana chiratidzo panzvimbo yemavara kune mamwe mapeji link? Ita shuwa yekupa yakakodzera screen reader rutsigiro aria
nehunhu uye .sr-only
zvekushandisa.
Yakaremara uye inoshanda nyika
Pagination zvinongedzo zvinogoneka kune akasiyana mamiriro. Shandisai .disabled
malink anoita seasingabatike uye .active
kuratidza peji iripo.
Nepo .disabled
kirasi inoshandisa pointer-events: none
kuyedza kudzima iyo link mashandiro e <a>
s, iyo CSS pfuma haisati yamira uye haiverengere keyboard navigation. Saka nekudaro, iwe unofanirwa kugara uchiwedzera tabindex="-1"
pane akaremara zvinongedzo uye shandisa tsika JavaScript kudzima zvizere kushanda kwavo.
Unogona kuchinjanisa maanchor anoshanda kana akaremara zve <span>
, kana kusiya anchor kana iri prev/inotevera miseve, kubvisa kuita kwekudzvanya uye kudzivirira kutarisisa kwekhibhodi uchichengeta zvitaera zvakada.
Fancy pagination yakakura kana diki? Wedzera .pagination-lg
kana .pagination-sm
kuwedzera saizi.
Shandura kurongeka kwezvikamu zvepeji neflexbox utilities .