@visual-framework/vf-pagination

Pagination component

About

A simple pagination component for long listings such as search results.

Usage

When to use this component

Use pagination:

• for long listings (such as search results and article archives) that consist of more than 100 items. If your list consists of fewer items you may not need to add pagination.
• when most users will only look at the content on the first page or first few pages.

When not to use this component

Do not use pagination:

• for linear content such as a long page or article.
• when you are asking the user to complete a form. Instead, use vf-button to let the user move to the next page and a Back link to let them move to the previous page.

Also see the recommendations by Nielsen Norman and the pagination compoment in gov.uk.

Accessibility

This component targets WCAG 2.1 AA accessibility.

Install

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

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack