Pagination: Disabled and active 

<nav class="kx-pagination">
    <div class="kx-btngroup kx-flex kx-flex-wrap" role="group" aria-label="Aria label example">
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link kx-is-disabled" tabindex="-1" href="#">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-left"></use>
    </svg>
</i>
        <span class="kx-btn__txt">Previous</span>
    </span>
</a>
        <span class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-is-active">1</span>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">2</span>
    </span>
</a>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">3</span>
    </span>
</a>
        <!-- LINK AS BUTTON Component -->
        <a class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-pagination__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Next</span>
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#angle-right"></use>
    </svg>
</i>
    </span>
</a>
    </div>
</nav>
 
<nav class="kx-pagination">
    <div class="kx-btngroup kx-flex kx-flex-wrap{% if align %} {{ align }}{% endif %}" role="group" aria-label="{{ ariaLabel }}">
    {%- for page in pages -%}
    {% if page.active -%}
        <span class="kx-btn kx-btn--skin-secondary kx-btn--size-large kx-is-active">{{ page.item.text }}</span>
    {% else -%}
        {% render '@button', page.item, true %}
    {% endif -%}
    {% endfor -%}
    </div>
</nav>
 
{
  "ariaLabel": "Aria label example",
  "classes": null,
  "pages": [
    {
      "item": {
        "text": "Previous",
        "skin": "secondary",
        "disabled": true,
        "href": "#",
        "icon": {
          "symbol": "angle-left",
          "size": "base"
        },
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "active": true,
      "item": {
        "text": "1",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "2",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "3",
        "skin": "secondary",
        "href": "#",
        "classes": [
          "kx-pagination__link"
        ]
      }
    },
    {
      "item": {
        "text": "Next",
        "skin": "secondary",
        "href": "#",
        "icon": {
          "symbol": "angle-right",
          "size": "base"
        },
        "iconAfter": true,
        "classes": [
          "kx-pagination__link"
        ]
      }
    }
  ]
}
  • Content: 
    // ==========================================================================
// Component: pagination
// ==========================================================================

// Elements (children)
// ==========================================================================

// Block (parent)
// ==========================================================================
.kx-pagination {
    @include pb(mini);
    position: relative;
    overflow: hidden;
}

// Modifiers
// ==========================================================================
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: src\components\01-pagination\_pagination.scss
  • Size: 579 Bytes

There are no notes for this item.