DSO Component Library

# Pagination: 100 98

WIP

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <ul class="dso-pagination">
        <li class="dso-previous" title="Vorige">
            <a href="#"></a>
        </li>
        <li>
            <a href="#">1</a>
        </li>
        <li>
            <span>...</span>
        </li>
        <li class="active">
            <span>98</span>
        </li>
        <li>
            <a href="#">99</a>
        </li>
        <li>
            <a href="#">100</a>
        </li>
        <li class="dso-next" title="Volgende">
            <a href="#"></a>
        </li>
    </ul>

`
`

    <ul class="dso-pagination">
      {{#if (ne current 1) }}
        <li class="dso-previous" title="Vorige">
          <a href="#"></a>
        </li>
        <li>
          <a href="#">1</a>
        </li>
      {{/if}}
      {{#if (and (gt current 3) (gte count 5)) }}
        <li>
          {{#if (eq count 5)}}
            <a href="#">2</a>
          {{else}}
            <span>...</span>
          {{/if}}
        </li>
      {{/if}}
      {{#if (or (ne current count) (gte count 4))}}
        {{#if (and (eq current count) (ne current 1)) }}
          <li>
            <a href="#" class="minTwee">{{subtract current 2 }}</a>
          </li>
        {{/if}}
      {{/if}}
      {{#if (and (gte current 3) (or (and (gte current 3) (lte count 5)) (and (gt count 5) (ne current (subtract count 2 )) ) )) }}
        <li {{#if (and (gte current 4) (lt current (subtract count 2))) }}class="previous"{{/if}}>
          <a href="#" class="minEen">{{subtract current 1 }}</a>
        </li>
      {{/if}}
      <li class="active">
        <span>{{ current }}</span>
      </li>
      {{#if (and (lte current (subtract count 2 )) (or (and (lte current 3) (lte count 5)) (and (ne current 3) (gt count 5)) ) ) }}
        <li {{#if (and (gte current 4) (lt current (subtract count 2))) }}class="next"{{/if}}>
          <a href="#">{{add current 1 }}</a>
        </li>
      {{/if}}
      {{#if (and (eq current 1) (gt count (add current 2))) }}
        <li>
          <a href="#">{{add current 2 }}</a>
        </li>
      {{/if}}
      {{#if (and (lte current (subtract count 3)) (gte count 5) ) }}
        <li>
          {{#if (eq count 5)}}
            <a href="#">{{ subtract count 1 }}</a>
          {{else}}
            <span>...</span>
          {{/if}}
        </li>
      {{/if}}
      {{#if (ne current count)}}
        <li>
          <a href="#">{{ count }}</a>
        </li>
        <li class="dso-next" title="Volgende">
          <a href="#"></a>
        </li>
      {{/if}}
    </ul>

`
`

    count: 100
    current: 98
    __title: 100 pagina's
    __explanation: pagina 98 geselecteerd

`

- Handle: @pagination--100-98
- Variants (30): Default , 1 1 , 2 1 , 2 2 , 3 1 , 3 2 , 3 3 , 4 1 , 4 2 , 4 3 , 4 4 , 5 1 , 5 2 , 5 3 , 5 4 , 5 5 , 6 1 , 6 2 , 6 3 , 6 4 , 6 5 , 6 6 , 7 3 , 7 4 , 7 5 , 100 98 , 100 99 , 100 100 , 100 1 , 500 50
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\pagination\pagination.hbs

There are no notes for this item.

### ERROR: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent

Anchor element found with a valid href attribute, but no link content has been supplied.

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

### 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="#">1</a>`

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

Check that the title element describes the document.

`<title>Pagination`

### 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="#"></a>`