Fuulaa (Pagination) jedhu
Galmee fi fakkeenyota fuula agarsiisuuf qabiyyee walqabate tartiiba agarsiisuuf fuula hedduu keessa jira.
Haala Waliigalaa
Fuula keenyaaf hidhannoowwan walitti hidhaman bilookii guddaa fayyadamna, hidhannoowwan akka hin darbinee fi salphaatti akka guddatan taasisa-kun hundi naannoo rukuttaa gurguddoo yeroo kenninu. Fuulli elementoota HTML tarree waliin ijaarameera kanaaf dubbistoonni iskiriinii baay'ina hidhannoo jiran beeksisuu danda'u. <nav>
Dubbistoota fi teeknooloojiiwwan gargaarsaa biroo iskiriinii gochuuf akka kutaa navigeeshinii adda baasuuf qaama marfama fayyadami .
Dabalataanis, fuulonni kutaa navigeeshinii akkasii tokkoo ol qabaachuu waan hin oolleef, kaayyoo isaa calaqqisiisuuf ibsa kennuunis aria-label
gaariidha <nav>
. Fakkeenyaaf, yoo qaamni fuula tuuta bu'aa barbaacha gidduutti naanna'uuf fayyadame, asxaan sirrii ta'uu danda'a 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>
Mallattoolee wajjin hojjechuu
Hidhamtoota fuula tokko tokkoof bakka barruu mallattoo ykn mallattoo fayyadamuu barbaadduu? aria
Amaloota waliin deeggarsa dubbisaa iskiriinii sirrii ta'e kennuu mirkaneessi .
<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>
Haalata hanqifamee fi socho'aa
Hidhamtoonni fuula (pagination links) haala adda addaatiif kan ofii barbaade ta'uu danda'u. .disabled
Hidhamtoota hin cuqaafamne fakkaatanii fi .active
fuula ammaa agarsiisuuf fayyadami .
.disabled
Gitni dalagaa hidhaa s hanqisuuf pointer-events: none
yaaluuf yoo fayyadamu ,<a>
qabeentiin CSS sun ammallee sadarkaa hin qabnee fi qajeelcha furtuu hin herrega. Akka kanaan, yeroo hunda tabindex="-1"
hidhannoowwan hanqifaman irratti dabaluu fi hojii isaanii guutummaatti hanqisuuf JaavaScript amala fayyadamuu qabda.
<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>
Filannoodhaan ankuraa socho'aa ykn hanqifame dhaaf jijjiiruu dandeessa <span>
, ykn haala xiyyawwan duraa/itti aanuu keessatti ankuraa dhiisuu dandeessa, dalagaa cuqaasuu haquu fi xiyyeeffannoo gabatee furtuu yeroo akkaataa yaadame qabattee ittisuuf.
- Kan duraa
- 1. 1.
- 2. 2.
- 3. 3.
- Kan itti aanu
<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>
Saayizii gochuu
Fuula guddaa moo xiqqaa ta'e barbaadduu? Dabalaa .pagination-lg
ykn .pagination-sm
safara dabalataaf.
<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>
<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>
Hiriirsuu
Hiriirsa qaamolee fuula faayilii flexbox waliin jijjiiri .
<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>