Source

Ɲɛjirali sɛbɛnw

Sɛbɛnw ni misaliw minnu bɛ ɲɛw jiracogo jira walasa k’a jira ko kunnafoni minnu bɛ tali kɛ ɲɔgɔn na, olu bɛ sɔrɔ ɲɛ caman kan.

Kuma bɛɛ lajɛlen

An bɛ baara Kɛ ni jὲɲɔgɔnya blokiba ye an ka ɲɛɲini kama, o b’a To jɛgɛnsiraw ka gɛlɛn ka Tɛmɛ ani u bɛ Se kà Labɛn nɔgɔya la—o bɛɛ bɛ Kɛ k’a sɔrɔ an bɛ yɔrɔbaw Di minnu bɛ Se ka Kɛ. Pagenation bɛ jɔ ni list HTML elements ye walasa ekran kalanbagaw ka se ka laseli kɛ jɛgɛnsira minnu bɛ sɔrɔ. Baara kɛ ni fɛn dɔ ye min bɛ <nav>fɛn dɔ siri walasa k’a dɔn i n’a fɔ taamasiyɛn yɔrɔ min bɛ kalanbagaw ni dɛmɛ fɛɛrɛ wɛrɛw jira.

Ka fara o kan, i n’a fɔ a ka c’a la, ɲɛw bɛ ni o ɲɔgɔnna taamasiyɛn-yɔrɔw ye minnu ka ca ni kelen ye, a ka ɲi ka ɲɛfɔli dɔ Di aria-labelwalasa <nav>a k’a kuntilenna jira. Misali la, ni ɲɛw yɔrɔ bɛ kɛ ka ɲinini jaabiw kulu dɔ cɛ, taamasiyɛn bɛnnen bɛ se ka kɛ 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>

Baara kɛli ni taamasiyɛnw ye

I b’a fɛ ka baara kɛ ni taamasiyɛn walima taamasiyɛn ye sɛbɛnni nɔ na ɲɛ dɔw ladɛrɛsiw la wa? Aw ye aw jija ka dɛmɛ ɲuman di ɛkran kalanbaga ma ni ariajogoɲumanya ye ani .sr-onlynafalan.

<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">&laquo;</span>
        <span class="sr-only">Previous</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Jamana minnu ye fiyentɔw ye ani minnu bɛ baara la

Pagenation links bɛ se ka ladilan ka kɛɲɛ ni cogoya wɛrɛw ye. Baara kɛ ni .disabledladɛrɛsiw ye minnu bɛ i n’a fɔ i tɛ se ka digi ani .activeka ɲɛ min bɛ yen sisan, o jira.

Hali ni .disabledkalasi bɛ baara Kɛ pointer-events: nonek'a ɲini ka s ka jὲɲɔgɔnya baarakɛcogo Dabila <a>, o CSS nafolo ma Kɛ fɔlɔ ye wa a tɛ jatebla Kɛ klaviyeti taamacogo la. O cogo la, i ka kan ka fara ɲɔgɔn kan tuma bɛɛ tabindex="-1"jɛgɛnsira minnu ma baara kɛ ani ka baara kɛ ni JavaScript ladamulen ye walasa k’u ka baarakɛcogo bali pewu.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#">2 <span class="sr-only">(current)</span></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>

I bɛ se ka anchor active walima disabled sɛgɛsɛgɛ ni i yɛrɛ sago ye <span>, walima ka anchor bɔ a la ni prev/next arrows ye, walasa ka click baarakɛcogo bɔ ani ka keyboard focus bali k’a sɔrɔ i bɛ styles laɲinitaw mara.

<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">
      <span class="page-link">
        2
        <span class="sr-only">(current)</span>
      </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>

Sizing (Sizing) kɛ

Fancy ka ɲɛ minnu ka bon walima minnu ka dɔgɔ? Aw bɛ a fara a kan .pagination-lgwalima .pagination-smwalasa ka hakɛ wɛrɛw fara a kan.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </ul>
</nav>

Alignment (labɛnni).

ɲɛbila yɔrɔw labɛncogo caman Changer ni flexbox nafamafɛnw ye .

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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" href="#" tabindex="-1">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>