hkk Frontend 2017

Paginierung 

<!-- Seite 1 (Erste Seite) -->
<nav class="pagination" role="navigation" aria-label="Seitennummerierung">
    <ul class="pagination__list">
        <li class="pagination__item pagination__item--prev">Vorherige Seite
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link pagination__link--current" href="" aria-current="page"><span class="u-hidden-visually">Aktuelle Seite: </span>1</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>2</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>3</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>4</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>5</a>
        </li>
        <li class="pagination__item pagination__item--next"><a class="pagination__link" href="" rel="next">Nächste Seite</a>
        </li>
    </ul>
</nav>


<!-- Seite 2 -->
<nav class="pagination" role="navigation" aria-label="Seitennummerierung">
    <ul class="pagination__list">
        <li class="pagination__item pagination__item--prev"><a class="pagination__link" href="" rel="prev">Vorherige Seite</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>1</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link pagination__link--current" href="" aria-current="page"><span class="u-hidden-visually">Aktuelle Seite: </span>2</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>3</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>4</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>5</a>
        </li>
        <li class="pagination__item pagination__item--next"><a class="pagination__link" href="" rel="next">Nächste Seite</a>
        </li>
    </ul>
</nav>


<!-- Seite 50 -->
<nav class="pagination" role="navigation" aria-label="Seitennummerierung">
    <ul class="pagination__list">
        <li class="pagination__item pagination__item--prev"><a class="pagination__link" href="" rel="prev">Vorherige Seite</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>48</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>49</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link pagination__link--current" href="" aria-current="page"><span class="u-hidden-visually">Aktuelle Seite: </span>50</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>51</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>52</a>
        </li>
        <li class="pagination__item pagination__item--next"><a class="pagination__link" href="" rel="next">Nächste Seite</a>
        </li>
    </ul>
</nav>


<!-- Seite 136 (Letzte Seite) -->
<nav class="pagination" role="navigation" aria-label="Seitennummerierung">
    <ul class="pagination__list">
        <li class="pagination__item pagination__item--prev"><a class="pagination__link" href="" rel="prev">Vorherige Seite</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>132</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>133</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>134</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link" href=""><span class="u-hidden-visually">Zur Seite </span>135</a>
        </li>
        <li class="pagination__item pagination__item--number"><a class="pagination__link pagination__link--current" href="" aria-current="page"><span class="u-hidden-visually">Aktuelle Seite: </span>136</a>
        </li>
        <li class="pagination__item pagination__item--next">Nächste Seite
        </li>
    </ul>
</nav>


-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);

  //- Apply modifier
  if (modifier) {
    attr.class.push(`pagination--${modifier}`);
  }

  // Logic for pagination
  let pageStart = activePage - ((pagesShown - 1) / 2)
  let pageEnd = activePage + ((pagesShown - 1) / 2)
  if (pageEnd > pagesTotal) {
    pageEnd = pagesTotal
    pageStart = activePage - (pagesShown - 1)
  }

  if (pageStart - ((pagesShown - 1) / 2) < 1) {
    pageEnd = 5;
    pageStart = 1;
  }

nav.pagination(role='navigation', aria-label='Seitennummerierung')&attributes(attr)
  ul.pagination__list
    //- Prev page
    li.pagination__item.pagination__item--prev
      if activePage > 1
        a.pagination__link(href='', rel='prev') Vorherige Seite
      else
        | Vorherige Seite

    //- Pages
    - for (var i = pageStart; i <= pageEnd; i++)
      li.pagination__item.pagination__item--number
        if (i === activePage)
          a.pagination__link.pagination__link--current(href='', aria-current='page') #[span.u-hidden-visually Aktuelle Seite: ]#{i}
        else
          a.pagination__link(href='') #[span.u-hidden-visually Zur Seite ]#{i}

    //- Next page
    li.pagination__item.pagination__item--next
      if activePage < pagesTotal
        a.pagination__link(href='', rel='next') Nächste Seite
      else
        | Nächste Seite
 
/* Seite 1 (Erste Seite) */
{
  "pagesTotal": 136,
  "pagesShown": 5,
  "activePage": 1
}


/* Seite 2 */
{
  "pagesTotal": 136,
  "pagesShown": 5,
  "activePage": 2
}


/* Seite 50 */
{
  "pagesTotal": 136,
  "pagesShown": 5,
  "activePage": 50
}


/* Seite 136 (Letzte Seite) */
{
  "pagesTotal": 136,
  "pagesShown": 5,
  "activePage": 136
}
  • Content: 
    .pagination {
  font-weight: bold;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.pagination__list {
  @include list-reset();

  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination__item {
  color: $color-steelgrey-dark;
  padding: 1rem;
}

.pagination__item--number {
  display: none;
}

.pagination__link {
  @include link($color-blue-light, $color-blue);

  display: inline-block;
  margin: -1rem;
  padding: 1rem;
}

.pagination__link--current {
  @include link($color-blue, $color-blue);
}

@include mq($from: m) {
  .pagination__item--number {
    display: block;
  }

  .pagination__item--prev {
    margin-right: 2rem;
  }

  .pagination__item--next {
    margin-left: 2rem;
  }
}

@include mq($from: l) {
  .pagination__item--prev {
    margin-right: 3rem;
  }

  .pagination__item--next {
    margin-left: 3rem;
  }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/atoms/pagination/pagination.scss
  • Size: 875 Bytes

There are no notes for this item.