Pej dɛn we dɛn rayt
Dokumɛnt ɛn ɛgzampul dɛn fɔ sho pej fɔ sho se wan siriɔs tin we gɛt fɔ du wit dis de akɔdin to bɔku pej dɛn.
Ɔvaviu fɔ di Baybul
Wi de yuz wan big blɔk we gɛt kɔnɛkt link fɔ wi pej, we de mek link dɛn at fɔ mis ɛn izi fɔ skel—ɔl dis de gi big hit eria dɛn. Dɛn bil pejin wit list HTML ɛlimɛnt dɛn so dat di wan dɛn we de rid di skrin go ebul fɔ anɔys di nɔmba fɔ di link dɛn we de. Yuz wan wrap <nav>
ɛlimɛnt fɔ no am as nevigishɔn sɛkshɔn fɔ skrin rida ɛn ɔda ɛtɛknɔlɔji dɛn we de ɛp.
Apat frɔm dat, bikɔs i go mɔs bi se pej dɛn gɛt pas wan pan dɛn kayn say dɛn de fɔ sho usay fɔ go, i go fayn fɔ mek yu gi wan tin we de tɔk aria-label
bɔt di <nav>
tin dɛn we dɛn want fɔ du. Fɔ ɛgzampul, if dɛn yuz di pejin pat fɔ go bitwin wan sɛt fɔ di tin dɛn we dɛn dɔn fɛn, wan rayt lɛbl kin bi aria-label="Search results pages"
.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
We yu de wok wit aykɔn dɛn
Yu de luk fɔ yuz aykɔn ɔ simbul insay di ples fɔ tɛks fɔ sɔm pej link dɛn? Mek shɔ se yu gi di rayt skrin rida sɔpɔt wit aria
atribyut dɛn.
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Disabled ɛn aktif stet dɛn
Pejin link dɛn kin kɔstɔmayt fɔ difrɛn tin dɛn. Yuz .disabled
fɔ link dɛn we tan lɛk se yu nɔ go ebul fɔ klik ɛn .active
fɔ sho di pej we yu de yuz naw.
Wail di .disabled
klas de yuz pointer-events: none
fɔ tray fɔ disable di link funkshɔnaliti fɔ <a>
s, da CSS prɔpati de nɔ standad yet ɛn i nɔ de akɔn fɔ kibɔd nevigishɔn. As a so, yu fɔ ad ɔltɛm tabindex="-1"
pan link dɛn we nɔ de wok ɛn yuz kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn wok.
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Yu kin opshɔnali swap aut aktif ɔ disabled ankɔ dɛn fɔ <span>
, ɔ ɔmit di anka insay di kes fɔ di prɛv/nɛks aro dɛn, fɔ pul di klik funkshɔnaliti ɛn fɔ mek di kibɔd nɔ pe atɛnshɔn we yu de kip di stayl dɛn we yu want.
- Bifo
- 1. Di wan dɛn we de
- 2. Di wan dɛn we de
- 3. Di wan dɛn we de
- Nɛks
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
Sayz fɔ di sayz
Fans big ɔ smɔl pejineshɔn? Ad .pagination-lg
ɔ .pagination-sm
fɔ ɔda saiz dɛn.
- 1. Di wan dɛn we de
- 2. Di wan dɛn we de
- 3. Di wan dɛn we de
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
- 1. Di wan dɛn we de
- 2. Di wan dɛn we de
- 3. Di wan dɛn we de
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
Alignmɛnt fɔ di wan dɛn we de
Chenj di alaynɛshɔn fɔ pejin kɔmpɔnɛnt dɛn wit fleksbɔks yutiliti dɛn .
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>