atomic-pager
atomic-pager
The atomic-pager provides buttons that allow the end user to navigate through the different result pages.
Introduction
The pager component provides buttons that allow the user to navigate through the different result pages, when there’s more than one page of results. A Pager is useful for datasets that are highly specific and may require a user to navigate and take note of a particular page for comparison.
User Experience and Best Practices
Usage Notes
-
If you want to encourage your users to reformulate or refine their query when they don’t see their desired results on the first page, use a pager.
-
When the items in a source are very specific, a pager gives the user more control and ability to compare results across pages.
-
A Pager component is helpful in giving the user a sense of how many results there are in their query and how far they want to dig into those results.
Guidelines
Don’t use a pager when you want your users to browse a product list, using a “Load more” component offers a more seamless experience. Do provide control to your user over how many results they want to display per page.
Use Cases and Examples
Considering Google, they provide a pagination on the bottom of the page, but we seldom use that because the answer is often at the top. However, if the items in a result set are highly specific, a pager helps a user keep track of the location of a specific result. A catalog of parts or services that only slightly differ from one another would benefit from a Pager over a Load More button.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
|
|
Specifies how many page buttons to display in the pager. |
|
|
Shadow Parts
| Part | Description |
|---|---|
|
The active page button. |
|
The list of the next/previous buttons and page-buttons. |
|
The next button. |
|
The page button. |
|
The list of page buttons. |
|
The previous button. |
Very useful
Not really
Very useful
Not really