Vebego Component Library

Pager 

<div class="atm-pager">
    <ul>
        <li>
            <a href="#">
                <span class="atm-icon  far fa-chevron-left   "></span>
            </a>
        </li>

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

        <li>
            <a href="#">
                <span class="atm-icon  far fa-chevron-right   "></span>
            </a>
        </li>
    </ul>
</div>
 
<div class="atm-pager">
    <ul>
        {{#if prevLink}}
        <li>
            <a href="{{prevLink}}">
                {{render '@icon' prevIcon merge=true}}
            </a>
        </li>
        {{/if}}

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

        {{#if nextLink}}
        <li>
            <a href="{{nextLink}}">
                {{render '@icon' nextIcon merge=true}}
            </a>
        </li>
        {{/if}}
    </ul>
</div>
 
{
  "prevLink": "#",
  "prevIcon": {
    "style": "far",
    "icon": "fa-chevron-left"
  },
  "nextLink": "#",
  "nextIcon": {
    "style": "far",
    "icon": "fa-chevron-right"
  },
  "pages": [
    {
      "page": "1",
      "href": "#"
    },
    {
      "page": "2",
      "href": "#"
    },
    {
      "page": "3",
      "href": "#",
      "active": true
    },
    {
      "page": "4",
      "href": "#"
    },
    {
      "page": "5",
      "href": "#"
    },
    {
      "page": "6",
      "href": "#"
    }
  ]
}
  • Content: 
    .atm-pager {
    @apply flex;
    @apply justify-center;

    ul {
        @apply font-bold;

        li {
            @apply inline-block;
            @apply mx-3 mb-4;

            a {
                @apply px-0.5 pb-1;

                &:hover,
                &.active {
                    @apply text-cta;
                }

                &.active {
                    @apply border-solid border-b-2;
                }
            }
        }
    }
}
  • URL: /components/raw/pager/pager.css
  • Filesystem Path: src\components\02-atoms\pager\pager.css
  • Size: 487 Bytes

No notes defined.