OFRAG Frontend Components Library v0.0.0

Pagination: With Next And Prev And With Four Digit Numbers 

<div class="pagination">
    <div class="pagination__container">
        <div class="pagination__prev">
            <a href="#" class="button-navigation--prev">
                <span class="visually-hidden">Vorherige Seite</span>
            </a>
        </div>

        <ul class="pagination__pages">
            <li class="pagination__page">
                <a href="#" class="pagination__page-link">1000</a>
            </li>
            <li class="pagination__page">
                <a href="#" class="pagination__page-link--active">1002</a>
            </li>
            <li class="pagination__page">
                <a href="#" class="pagination__page-link">1003</a>
            </li>
            <li class="pagination__page">
                <a href="#" class="pagination__page-link">1004</a>
            </li>
            <li class="pagination__page">
                <span class="pagination__page-dots">…</span>
            </li>
            <li class="pagination__page">
                <a href="#" class="pagination__page-link">9999</a>
            </li>
        </ul>

        <div class="pagination__next">
            <a href="#" class="button-navigation--next">
                <span class="visually-hidden">Nächste Seite</span>
            </a>
        </div>
    </div>
</div>
 
{% include '@SharedComponents/modules/shared-product/components/pagination/pagination.twig' %}
 
{
  "prev": {
    "title": "Vorherige Seite",
    "href": "#"
  },
  "pages": [
    {
      "title": "1000",
      "href": "#"
    },
    {
      "title": "1002",
      "href": "#",
      "active": true
    },
    {
      "title": "1003",
      "href": "#"
    },
    {
      "title": "1004",
      "href": "#"
    },
    {
      "title": "…"
    },
    {
      "title": "9999",
      "href": "#"
    }
  ],
  "next": {
    "title": "Nächste Seite",
    "href": "#"
  }
}
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared-product/components/pagination/pagination";
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: src/components/modules/shared-product/components/pagination/pagination.scss
  • Size: 130 Bytes

No notes defined.