UHasselt Component Library

Pager 

<ul class="pager">
    <li>
        <a href="#">
            <span class="icon fal fa-long-arrow-left   " aria-hidden="true"></span>
            Vorige
        </a>
    </li>

    <li class="">
        <a href="#">
            1
        </a>
    </li>
    <li class="">
        <a href="#">
            2
        </a>
    </li>
    <li class="active">
        <a href="#">
            3
        </a>
    </li>
    <li class="">
        <a href="#">
            4
        </a>
    </li>
    <li class="">
        <a href="#">
            5
        </a>
    </li>
    <li class="">
        <a href="#">
            6
        </a>
    </li>

    <li>
        <a href="#">
            Volgende
            <span class="icon fal fa-long-arrow-right   " aria-hidden="true"></span>
        </a>
    </li>
</ul>
 
<ul class="pager">
        {{#if previous}}
            <li>
                <a href="{{ link }}">
                    {{ render '@icon' previous.icon}}
                    {{ previous.text }}
                </a>
            </li>
        {{/if}}

        {{#each pages}}
            <li class="{{#if active}}active{{/if}}">
                <a href="#">
                    {{ page }}
                </a>
            </li>
        {{/each}}

        {{#if next}}
            <li>
                <a href="{{ link }}">
                    {{ next.text }}
                    {{ render '@icon' next.icon}}
                </a>
            </li>
        {{/if}}
</ul>
 
{
  "link": "#",
  "active": false,
  "style": "fal",
  "previous": {
    "text": "Vorige",
    "icon": {
      "style": "fal",
      "icon": "fa-long-arrow-left"
    }
  },
  "pages": [
    {
      "page": "1"
    },
    {
      "page": "2"
    },
    {
      "page": "3",
      "active": true
    },
    {
      "page": "4"
    },
    {
      "page": "5"
    },
    {
      "page": "6"
    }
  ],
  "next": {
    "text": "Volgende",
    "icon": {
      "style": "fal",
      "icon": "fa-long-arrow-right"
    }
  }
}
  • Content: 
    .pager {
    @apply mb-8 mt-8;
    @apply sm:text-center text-left;

    li {
        @apply mb-2 mr-1 inline-block;

        a {
            @apply px-3 py-1 block bg-white text-red border border-red no-underline font-semibold;

            &:hover {
                @apply bg-red text-white;
            }
        }

        &.active a {
            @apply bg-red text-white;
        }
    }
}
  • URL: /components/raw/pager/pager.css
  • Filesystem Path: src\components\02-atoms\pager\pager.css
  • Size: 416 Bytes

No notes defined.