Skip to content

Pagination: .page-text (class for skipped/omitted pages) (v5.3) #41500

Open
@WinterSilence

Description

@WinterSilence

Prerequisites

Proposal

Add class page-text same to page-link but with default color (or with secondary color) to mark skipped/omitted page ranges.

Motivation and context

Example

<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>
      </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"><span class="page-text">&hellip;</span></li>

    <li class="page-item"><a class="page-link" href="#">9</a></li>
    <li class="page-item active"><span class="page-link">10</span></li>
    <li class="page-item"><a class="page-link" href="#">11</a></li>

    <li class="page-item"><span class="page-text">&hellip;</span></li>
    
    <li class="page-item"><a class="page-link" href="#">29</a></li>
    <li class="page-item"><a class="page-link" href="#">30</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions