SourcePagination
Cov ntaub ntawv thiab cov piv txwv rau kev qhia pagination los qhia txog cov ntsiab lus cuam tshuam muaj nyob thoob plaws ntau nplooj ntawv.
Peb siv qhov thaiv loj ntawm kev sib txuas rau peb cov pagination, ua cov kev sib txuas nyuaj kom tsis nco qab thiab yooj yim scalable-tag nrho thaum muab cov cheeb tsam loj. Pagination yog tsim nrog cov npe HTML cov ntsiab lus kom cov neeg nyeem ntawv tuaj yeem tshaj tawm cov xov tooj ntawm cov ntawv txuas. Siv lub <nav>
ntsiab lus qhwv los txheeb xyuas nws ua ntu kev taw qhia los tshuaj xyuas cov neeg nyeem thiab lwm yam cuab yeej pabcuam.
Tsis tas li ntawd, raws li cov nplooj ntawv yuav muaj ntau tshaj li ib qho kev taw qhia, nws raug nquahu kom muab cov lus piav qhia aria-label
rau qhov <nav>
xav txog nws lub hom phiaj. Piv txwv li, yog hais tias cov pagination tivthaiv yog siv los mus rau ntawm ib pawg ntawm kev tshawb nrhiav, ib daim ntawv lo tsim nyog yuav yog aria-label="Search results pages"
.
Nrhiav siv lub cim lossis cim rau hauv qhov chaw ntawm cov ntawv nyeem rau qee qhov kev sib txuas ntawm pagination? Nco ntsoov muab kev txhawb nqa kev nyeem ntawv zoo nrog cov aria
cwj pwm thiab cov .sr-only
khoom siv.
Disabled thiab active xeev
Pagination txuas yog customizable rau cov xwm txheej sib txawv. Siv .disabled
rau cov kev sib txuas uas tshwm sim un-clickable thiab .active
qhia rau nplooj ntawv tam sim no.
Thaum cov .disabled
chav kawm siv pointer-events: none
los sim lov tes taw qhov txuas kev ua haujlwm ntawm <a>
s, cov cuab yeej CSS tseem tsis tau ua qauv thiab tsis suav rau cov keyboard navigation. Yog li ntawd, koj yuav tsum ib txwm ntxiv tabindex="-1"
rau cov neeg xiam oob khab txuas thiab siv kev cai JavaScript kom ua tiav lawv cov haujlwm.
Koj tuaj yeem xaiv hloov pauv cov khoom siv lossis cov neeg xiam oob khab rau <span>
, lossis tshem lub thauj tog rau nkoj nyob rau hauv rooj plaub ntawm cov xub ua ntej / tom ntej, kom tshem tawm cov nyem ua haujlwm thiab tiv thaiv cov keyboard tsom thaum khaws cov hom phiaj.
Xav kom loj dua lossis me dua pagination? Ntxiv .pagination-lg
lossis .pagination-sm
rau qhov ntau thiab tsawg.
Hloov cov kev sib raug zoo ntawm pagination Cheebtsam nrog flexbox utilities .