Pattern Library

{% load cotton %}

<div class="component-variants">
    <h1>Pagination Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton pagination aria_label="{{ variant.aria_label }}" %}
            {% if variant.show_previous %}
            {% cotton pagination.item type="previous" href="{{ variant.previous_href }}" aria_label="{{ variant.previous_aria_label }}" %}{{ variant.previous_text }}{% endcotton %}
            {% endif %}

            {% for item in variant.items %}
                {% if item.type == "overflow" %}
                {% cotton pagination.item type="overflow" %}{% endcotton %}
                {% else %}
                {% cotton pagination.item type="page" page_number="{{ item.page }}" href="{{ item.href }}" is_current="{{ item.is_current|default:'' }}" aria_label="{{ item.aria_label }}" %}{% endcotton %}
                {% endif %}
            {% endfor %}

            {% if variant.show_next %}
            {% cotton pagination.item type="next" href="{{ variant.next_href }}" aria_label="{{ variant.next_aria_label }}" %}{{ variant.next_text }}{% endcotton %}
            {% endif %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Pagination
context:
  variants:
    - title: "Default Pagination"
      aria_label: "Pagination"
      show_previous: "true"
      previous_text: "Previous"
      previous_href: "#"
      previous_aria_label: "Previous page"
      show_next: "true"
      next_text: "Next"
      next_href: "#"
      next_aria_label: "Next page"
      items:
        - page: 1
          href: "#"
          aria_label: "Page 1"
        - type: "overflow"
        - page: 9
          href: "#"
          aria_label: "Page 9"
        - page: 10
          href: "#"
          is_current: "true"
          aria_label: "Page 10"
        - page: 11
          href: "#"
          aria_label: "Page 11"
        - type: "overflow"
        - page: 24
          href: "#"
          aria_label: "Last page, page 24"
          
    - title: "Unbounded Pagination"
      aria_label: "Pagination"
      show_previous: "true"
      previous_text: "Previous"
      previous_href: "#"
      previous_aria_label: "Previous page"
      show_next: "true"
      next_text: "Next"
      next_href: "#"
      next_aria_label: "Next page"
      items:
        - page: 1
          href: "#"
          aria_label: "Page 1"
        - type: "overflow"
        - page: 9
          href: "#"
          aria_label: "Page 9"
        - page: 10
          href: "#"
          is_current: "true"
          aria_label: "Page 10"
        - page: 11
          href: "#"
          aria_label: "Page 11"
        - page: 12
          href: "#"
          aria_label: "Page 12"
        - type: "overflow"