Pagination block

Pagination provides a clear way for users to navigate through content or data split across multiple pages.

github location npm version

Usage

The vf-pagination component helps users focus on a manageable set of content at a time and gives users the controls to move across the pages in any order (non-linear navigation). It commonly appears below the content it controls, after the final item in the list. The placement could vary in some use cases. Pagination is often used for search results, listings and tables.

When to use this component

  • To split large amounts of content or data into smaller, manageable chunks that are easier for users to consume and navigate. Examples include search results or article listing pages.
  • When loading all available data at once would significantly increase page load time.
  • When most users will only look at the content on the first page or first few pages.
  • When users need a stable sense of position (for example “page 3 of 12”) and the ability to return to a specific page reliably (e.g., sharing or bookmarking a page of results).

When not to use this component

  • Don’t use pagination when all items fit on a single page.
  • This component should not be used for long article pages.
  • Don't use pagination for linear journeys such as multi-step forms or guided flows. In such cases use the vf-button with clear labels to let users move to the next or previous page.
  • Avoid pagination when it would cause users to lose selections, filters, or context between pages.

Variants

The pagination component provides options that can be used to provide the navigation experience that best fits different use cases.

Default

The default pagination component shows Previous (<) and Next (>) navigation controls alongside a set of numbered page links.

Jump to controls

This variant extends the navigation controls of the default by adding “Jump to first page” (<<) and “Jump to last page” (>>) buttons.

Accessibility

Landmarks and naming

  • Wrap pagination in a nav landmark (or equivalent) and provide an accessible name such as aria-label="Pagination" or, ideally, a context-specific label like aria-label="Search results pages".
  • WCAG reference: 1.3.1 Info and Relationships (WCAG 2.2).

Current page

  • Mark the current page with aria-current="page" (or equivalent) so screen readers announce it correctly.
  • WCAG reference: 4.1.2 Name, Role, Value (WCAG 2.2).

Touch targets

  • Ensure all interactive targets (numbers and arrows) meet minimum target size and have enough spacing to avoid accidental activation.
  • WCAG reference: 2.5.8 Target Size (Minimum) (WCAG 2.2).

Link/button labelling

  • Use clear, localised labels for controls:
    • “Go to page 2”
    • “Go to next page”
    • “Go to previous page”
    • “Go to first page”
    • “Go to last page”
  • Avoid abbreviations like “Goto” and avoid relying on symbols alone (“<”, “>”) without accessible text.
  • WCAG reference: 2.4.6 Headings and Labels (WCAG 2.2), 4.1.2 Name, Role, Value (WCAG 2.2).

Keyboard interaction

  • Ensure all controls are reachable with Tab and activatable with Enter and Space as appropriate.
  • Provide a visible focus indicator that meets contrast requirements.
  • WCAG reference: 2.1.1 Keyboard (WCAG 2.2), 2.4.7 Focus Visible (WCAG 2.2), 1.4.11 Non-text Contrast (WCAG 2.2)

Variants

Default variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"previous_text" : "Previous",
"previous_url" : "JavaScript:Void(0);",
"next_text" : "Next",
"next_url" : "JavaScript:Void(0);",
"jumpBack_text" : -10,
"jumpBack_url" : "JavaScript:Void(0);",
"jumpForward_text" : 10,
"jumpForward_url" : "JavaScript:Void(0);",
"pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-pagination/vf-pagination.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-pagination', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "previous_text" : "Previous",
  "previous_url" : "JavaScript:Void(0);",
  "next_text" : "Next",
  "next_url" : "JavaScript:Void(0);",
  "jumpBack_text" : -10,
  "jumpBack_url" : "JavaScript:Void(0);",
  "jumpForward_text" : 10,
  "jumpForward_url" : "JavaScript:Void(0);",
  "pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-pagination" aria-label="Pagination">
  <ul class="vf-pagination__list">
    <li class="vf-pagination__item vf-pagination__item--jump-back">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="First page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 5.5L8.5 10.5L13.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 5.5L4.5 10.5L9.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">First page</span>
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--previous-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Previous page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5 5.5L6.5 10.5L11.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Previous page</span>
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>1
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>2
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>3
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--is-active">
      <span class="vf-pagination__label" aria-current="page">
        <span class="vf-u-sr-only">Page </span>4
      </span>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>5
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--next-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Next page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.5 5.5L13.5 10.5L8.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Next page</span>
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--jump-forward">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Last page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 5.5L11.5 10.5L6.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.5 5.5L15.5 10.5L10.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Last page</span>
      </a>
    </li>
  </ul>
</nav>

Default Mobile variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"previous_text" : "Previous",
"previous_url" : "JavaScript:Void(0);",
"next_text" : "Next",
"next_url" : "JavaScript:Void(0);",
"jumpBack_text" : -10,
"jumpBack_url" : "JavaScript:Void(0);",
"jumpForward_text" : 10,
"jumpForward_url" : "JavaScript:Void(0);",
"pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-pagination/vf-pagination.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-pagination', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "previous_text" : "Previous",
  "previous_url" : "JavaScript:Void(0);",
  "next_text" : "Next",
  "next_url" : "JavaScript:Void(0);",
  "jumpBack_text" : -10,
  "jumpBack_url" : "JavaScript:Void(0);",
  "jumpForward_text" : 10,
  "jumpForward_url" : "JavaScript:Void(0);",
  "pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-pagination" aria-label="Pagination">
  <ul class="vf-pagination__list">
    <li class="vf-pagination__item vf-pagination__item--jump-back">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="First page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.5 5.5L8.5 10.5L13.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.5 5.5L4.5 10.5L9.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">First page</span>
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--previous-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Previous page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5 5.5L6.5 10.5L11.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Previous page</span>
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>1
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>2
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>3
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--next-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Next page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.5 5.5L13.5 10.5L8.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Next page</span>
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--jump-forward">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Last page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.5 5.5L11.5 10.5L6.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.5 5.5L15.5 10.5L10.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Last page</span>
      </a>
    </li>
  </ul>
</nav>

Default Without Jump Controls variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"previous_text" : "Previous",
"previous_url" : "JavaScript:Void(0);",
"next_text" : "Next",
"next_url" : "JavaScript:Void(0);",
"jumpBack_text" : -10,
"jumpBack_url" : "JavaScript:Void(0);",
"jumpForward_text" : 10,
"jumpForward_url" : "JavaScript:Void(0);",
"pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-pagination/vf-pagination.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-pagination', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "previous_text" : "Previous",
  "previous_url" : "JavaScript:Void(0);",
  "next_text" : "Next",
  "next_url" : "JavaScript:Void(0);",
  "jumpBack_text" : -10,
  "jumpBack_url" : "JavaScript:Void(0);",
  "jumpForward_text" : 10,
  "jumpForward_url" : "JavaScript:Void(0);",
  "pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-pagination" aria-label="Pagination">
  <ul class="vf-pagination__list">
    <li class="vf-pagination__item vf-pagination__item--previous-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Previous page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5 5.5L6.5 10.5L11.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Previous page</span>
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>1
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>2
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>3
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--is-active">
      <span class="vf-pagination__label" aria-current="page">
        <span class="vf-u-sr-only">Page </span>4
      </span>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>5
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>6
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>7
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--next-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Next page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.5 5.5L13.5 10.5L8.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Next page</span>
      </a>
    </li>
  </ul>
</nav>

Default Mobile Without Jump Controls variant

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"exampleMultiColumns" : "false",
"component-type" : "block",
"previous_text" : "Previous",
"previous_url" : "JavaScript:Void(0);",
"next_text" : "Next",
"next_url" : "JavaScript:Void(0);",
"jumpBack_text" : -10,
"jumpBack_url" : "JavaScript:Void(0);",
"jumpForward_text" : 10,
"jumpForward_url" : "JavaScript:Void(0);",
"pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-pagination/vf-pagination.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-pagination', {
  "exampleMultiColumns" : "false",
  "component-type" : "block",
  "previous_text" : "Previous",
  "previous_url" : "JavaScript:Void(0);",
  "next_text" : "Next",
  "next_url" : "JavaScript:Void(0);",
  "jumpBack_text" : -10,
  "jumpBack_url" : "JavaScript:Void(0);",
  "jumpForward_text" : 10,
  "jumpForward_url" : "JavaScript:Void(0);",
  "pagination__list" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<nav class="vf-pagination" aria-label="Pagination">
  <ul class="vf-pagination__list">
    <li class="vf-pagination__item vf-pagination__item--previous-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Previous page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.5 5.5L6.5 10.5L11.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Previous page</span>
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>1
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>2
      </a>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>3
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--is-active">
      <span class="vf-pagination__label" aria-current="page">
        <span class="vf-u-sr-only">Page </span>4
      </span>
    </li>
    <li class="vf-pagination__item">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" onclick="window.scrollTo(0,100)">
        <span class="vf-u-sr-only">Page </span>5
      </a>
    </li>
    <li class="vf-pagination__item vf-pagination__item--next-page">
      <a href="JavaScript:Void(0);" class="vf-pagination__link" aria-label="Next page">
        <span class="vf-pagination__icon" aria-hidden="true" onclick="window.scrollTo(0,100)">
          <svg width="16" height="16" viewBox="0 0 20 20" focusable="false" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.5 5.5L13.5 10.5L8.5 15.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </span>
        <span class="vf-u-sr-only">Next page</span>
      </a>
    </li>
  </ul>
</nav>

Examples

First Page Selected

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install with this command.

$ yarn add --dev @visual-framework/vf-pagination

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-pagination/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.1.3

  • Changed: Pagination updated as per Intranet and LRO implementation findings Tracking issue

1.1.2

  • Bug fix : Changelog updated to match npmjs versions.

1.1.1

  • UI changes to fix accessibility issues
  • Changed : Modified the vf-pagination__link class to support vf-link styles
  • Changed : Modified the style for disabled links like 'Previous' (when on 1st page) so that it does not fail contrast check. Added example to showcase this behaviour.
  • Changed : Updated the current page number style to show bold text

1.1.0

  • reduces the amount of variants to 'start again'.
  • centres the default variant

1.0.1

  • Fixes CSS to match stylelint rules.
  • https://github.com/visual-framework/vf-core/pull/1405

1.0.1-rc.3

  • changes any set- style functions to cleaner version

1.0.0-rc.1

  • right align pagination options

1.0.0-beta.3

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-beta.2

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.7

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.6

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.5

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.4

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.3

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.2

  • Version bump only for package @visual-framework/vf-pagination

1.0.0-alpha.1

  • Version bump only for package @visual-framework/vf-pagination

Assets


File system location: components/vf-pagination

Find an issue on this page? Propose a change or discuss it.