DSO Component Library

Pager 

<!-- Default -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li>
            <a href="#">
        Vorige
      </a>
        </li>
        <li>
            <a href="#">
        Volgende
      </a>
        </li>
    </ul>
</nav>


<!-- Centered Disabled -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li class="disabled">
            <a href="#">
        Vorige
      </a>
        </li>
        <li>
            <a href="#">
        Volgende
      </a>
        </li>
    </ul>
</nav>


<!-- Aligned -->
<nav aria-label="Zoekresultaten pager">
    <ul class="pager">
        <li class="previous">
            <a href="#">
        <span aria-hidden="true">&larr;</span>
        Vorige
      </a>
        </li>
        <li class="next disabled">
            <a href="#">
        Volgende
        <span aria-hidden="true">&rarr;</span>
      </a>
        </li>
    </ul>
</nav>


<!-- Default -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li{{#if firstPage}} class="disabled"{{/if}}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li{{#if lastPage}} class="disabled"{{/if}}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Centered Disabled -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li{{#if firstPage}} class="disabled"{{/if}}>
      <a href="#">
        Vorige
      </a>
    </li>
    <li{{#if lastPage}} class="disabled"{{/if}}>
      <a href="#">
        Volgende
      </a>
    </li>
  </ul>
</nav>

<!-- Aligned -->
<nav aria-label="Zoekresultaten pager">
  <ul class="pager">
    <li class="previous{{#if firstPage}} disabled{{/if}}">
      <a href="#">
        <span aria-hidden="true">&larr;</span>
        Vorige
      </a>
    </li>
    <li class="next{{#if lastPage}} disabled{{/if}}">
      <a href="#">
        Volgende
        <span aria-hidden="true">&rarr;</span>
      </a>
    </li>
  </ul>
</nav>
 
/* Default: No context defined */


/* Centered Disabled */
firstPage: true



/* Aligned */
lastPage: true

Standaard worden de knoppen gecentreerd. Wil je ze aan de zijkant uitlijnen, dan dien je .previous en .next te plaatsen op de li's.

Een pager is navigatie. Om de Bootstrap documentatie te citeren:

Labelling the pagination component

The pagination component should be wrapped in a

(https://getbootstrap.com/docs/3.3/components/#callout-pagination-label)

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<a href="#"> Vorige </a>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Pager

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#"> Vorige </a>