Online Slaapcomfort components for Magento 2

Pager 

<!-- Default -->
<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page, disabled" disabled tabindex="-1">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 1, current page">
            1
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 2">
                2
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 3">
                3
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 4">
                4
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 5">
                5
            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                </svg>

            </a>
        </li>
    </ul>
</nav>


<!-- Both Arrows -->
<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 1">
                1
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 2">
                2
            </a>
        </li>
        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 3, current page">
            3
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 4">
                4
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 5">
                5
            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                </svg>

            </a>
        </li>
    </ul>
</nav>


<!-- Arrow Left -->
<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 1">
                1
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 2">
                2
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 3">
                3
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 4">
                4
            </a>
        </li>
        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 5, current page">
            5
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page, disabled" disabled tabindex="-1">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                </svg>

            </a>
        </li>
    </ul>
</nav>


<!-- More Sites -->
<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 6, current page">
            6
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 7">
                7
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="">
                ...
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 17">
                17
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 18">
                18
            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                </svg>

            </a>
        </li>
    </ul>
</nav>


<!-- Arrow Right -->
<nav class="pager " role="navigation" aria-label="Pagination navigation">
    <ul class="pager__list">
        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--prev
                    button button--icon
                " aria-label="Link to previous page">
                <svg class="icon pager__link-prev" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
                </svg>

            </a>
        </li>

        <li class="pager__item pager__item--current" aria-current="page" aria-label="Page 13, current page">
            13
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 14">
                14
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 15">
                15
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 16">
                16
            </a>
        </li>
        <li class="pager__item">
            <a href="#" class="pager__link link" aria-label="Link to page 17">
                17
            </a>
        </li>

        <li class="pager__item">
            <a href="#" class="
                    pager__link
                    pager__link--next
                    button button--icon
                " aria-label="Link to next page">
                <svg class="icon pager__link-next" role="presentation" focusable="false">
                    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
                </svg>

            </a>
        </li>
    </ul>
</nav>


<nav
    class="pager {{ class }}"
    {{{attributes}}}
>
    <ul class="pager__list">
        <li class="pager__item">
            <a
                href="#"
                class="
                    pager__link
                    pager__link--prev
                    {{ navItem.class }}
                "
                aria-label="{{ ariaLabelLeft }}"
                {{#unless arrowLeftActive}}disabled tabindex="-1"{{/unless}}
            >
                {{ render '@icon' navItem.iconPrev }}
            </a>
        </li>

        {{#each pages as |page|}}
            {{#if this.active}}
                <li
                    class="pager__item pager__item--current"
                    aria-current="page"
                    aria-label="Page {{ pageNo }}, current page"
                >
                    {{ pageNo }}
                </li>
            {{else}}
                <li class="pager__item">
                    <a
                        href="#"
                        class="pager__link {{ class }}"
                        aria-label="{{ ariaLabel }}"
                    >
                        {{ pageNo }}
                    </a>
                </li>
            {{/if}}
        {{/each}}

        <li class="pager__item">
            <a
                href="#"
                class="
                    pager__link
                    pager__link--next
                    {{ navItem.class }}
                "
                aria-label="{{ ariaLabelRight }}"
                {{#unless arrowRightActive}}disabled tabindex="-1"{{/unless}}
            >
                {{ render '@icon' navItem.iconNext }}
            </a>
        </li>
    </ul>
</nav>
 
/* Default */
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": false,
  "arrowRightActive": true,
  "ariaLabelLeft": "Link to previous page, disabled",
  "ariaLabelRight": "Link to next page",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": "1",
      "active": true
    },
    {
      "pageNo": 2,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 2"
    },
    {
      "pageNo": 3,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 3"
    },
    {
      "pageNo": 4,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 4"
    },
    {
      "pageNo": 5,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 5"
    }
  ]
}


/* Both Arrows */
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": true,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": 1,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 1"
    },
    {
      "pageNo": 2,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 2"
    },
    {
      "pageNo": 3,
      "active": true,
      "ariaLabel": "Link to page 3"
    },
    {
      "pageNo": 4,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 4"
    },
    {
      "pageNo": 5,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 5"
    }
  ]
}


/* Arrow Left */
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": false,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page, disabled",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": 1,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 1"
    },
    {
      "pageNo": 2,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 2"
    },
    {
      "pageNo": 3,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 3"
    },
    {
      "pageNo": 4,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 4"
    },
    {
      "pageNo": 5,
      "active": true
    }
  ]
}


/* More Sites */
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": true,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": 6,
      "active": true
    },
    {
      "pageNo": 7,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 7"
    },
    {
      "pageNo": "...",
      "class": "link",
      "active": false
    },
    {
      "pageNo": 17,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 17"
    },
    {
      "pageNo": 18,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 18"
    }
  ]
}


/* Arrow Right */
{
  "attributes": "role=\"navigation\" aria-label=\"Pagination navigation\"",
  "arrowLeftActive": true,
  "arrowRightActive": true,
  "ariaLabelLeft": "Link to previous page",
  "ariaLabelRight": "Link to next page",
  "navItem": {
    "class": "button button--icon",
    "iconPrev": {
      "id": "arrow-left",
      "class": "pager__link-prev",
      "hidden": true
    },
    "iconNext": {
      "id": "arrow-right",
      "class": "pager__link-next",
      "hidden": true
    }
  },
  "pages": [
    {
      "pageNo": 13,
      "active": true
    },
    {
      "pageNo": 14,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 14"
    },
    {
      "pageNo": 15,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 15"
    },
    {
      "pageNo": 16,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 16"
    },
    {
      "pageNo": 17,
      "active": false,
      "class": "link",
      "ariaLabel": "Link to page 17"
    }
  ]
}
  • Content: 
    $pager__list-padding                        : 0 $spacer !default;
$pager__list-margin                         : 0 !default;

$pager__item-margin                         : 0 $spacer !default;
$pager__item-first-child-margin             : 0 $spacer--semi-medium 0 0 !default;
$pager__item-last-child-margin              : 0 0 0 $spacer--semi-medium !default;
$pager__item-after-position--current        : absolute !default;
$pager__item-after-display--current         : inline !default;
$pager__item-after-width--current           : 100% !default;
$pager__item-after-height--current          : 2px !default;
$pager__item-after-background-color--current: $color-primary !default;
$pager__item-after-transition--current      : $transition-base !default;
$pager__item-after-transform-origin--current: left !default;
$pager__item-size                           : $spacer--extra-large !default;
$pager__item--current                       : $font-color-base !default;
$pager__item-text-decoration--current       : none !default;
$pager__item-font-size                      : $font-size-medium !default;

$pager__link-width                          : 100% !default;
$pager__link-size                           : $spacer--extra-large !default;
$pager__link-fill                           : $color-secondary !default;
$pager__link-fill-disabled                  : $gray !default;
$pager__link-bg-disabled                    : $white !default;
$pager__link-focus-fill                     : $color-primary !default;
$pager__link-color                          : $color-secondary !default;
$pager__link-text-decoration                : none !default;
$pager__link-hover-color                    : $color-primary !default;
$pager__link-hover-fill                     : $color-primary !default;

$pager__icon-size                           : 24px !default;
  • URL: /components/raw/pager/_pager-variables.scss
  • Filesystem Path: build/components/Molecules/pager/_pager-variables.scss
  • Size: 1.8 KB
  • Content: 
    @import 'pager-variables';

.pager {
    width: 100%;
    text-align: center;

    &__list {
        display: flex;
        align-items: center;
        justify-content: center;
        list-style-type: none;
        padding: $pager__list-padding;
        margin: $pager__list-margin;
    }

    &__item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-basis: $pager__item-size;
        height: $pager__item-size;
        margin: $pager__item-margin;
        font-size: $pager__item-font-size;
        padding: 0;

        &:first-child {
            margin: $pager__item-first-child-margin;
        }

        &:last-child {
            margin: $pager__item-last-child-margin;
        }

        &--current {
            position: relative;
            color: $pager__item--current;
            text-decoration: $pager__item-text-decoration--current;

            &:after {
                content: '';
                position: $pager__item-after-position--current;
                bottom: 0;
                left: 0;
                z-index: -1;
                display: $pager__item-after-display--current;
                width: $pager__item-after-width--current;
                height: $pager__item-after-height--current;
                background-color: $pager__item-after-background-color--current;
                transition: $pager__item-after-transition--current;
                transform-origin: $pager__item-after-transform-origin--current;
            }
        }
    }

    &__link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: $pager__link-width;
        height: $pager__link-size;
        color: $pager__link-color;
        text-decoration: $pager__link-text-decoration;


        &[disabled] {
            background-color: $pager__link-bg-disabled;
            pointer-events: none;
            cursor: not-allowed;

            .icon {
                fill: $pager__link-fill-disabled;
            }
        }

        &--prev,
        &--next {
            .icon {
                fill: $pager__link-fill;
            }
        }
    }

    &__icon {
        width: $pager__icon-size;
        height: $pager__icon-size;
    }
}
  • URL: /components/raw/pager/_pager.scss
  • Filesystem Path: build/components/Molecules/pager/_pager.scss
  • Size: 2.3 KB

Pager

Accessibility

  • Add apropriate labels and aria-labels form page items
  • Structure pagination as a navigation and use a nav element
  • Use aria-current="page" to mark active/current page in pager
  • Use disable on buttons like previous or next which are not lead anywhere