The Pagination component is comprised of a previous link, a next page link, and page number links. Use a Pagination component when you need a way to separate a large portion of content into smaller portions. It serves as navigation and informs users where they currently are and where they can go in the future.
This is the pattern for when you have three or fewer pages. All three page numbers and prev/next links that appear in the pagination are clickable. The current page number should be bold and have a background color. When the Next link is tapped or clicked the next sequential page is shown and the background color should be removed from the current page number and shown on the next sequential page number. The opposite is true for the Prev link. If the first or last page are selected then the previous or next links should be disabled respectively.
The Pagination component in spark-core-angular consists of two Angular components:
The Pagination component expects you to supply data and click handlers as inputs.
<nav aria-label="Pagination Navigation" data-sprk-pagination="default">
<ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--disabled" href="#" data-sprk-pagination="prev">
Prev
</a>
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--current">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item" aria-current="true">
1
</a>
</li>
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
2
</a>
</li>
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
3
</a>
</li>
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="next">
Next
</a>
</li>
</ul>
</nav>
<sprk-pagination paginationType="default" [currentPage]="1" nextLinkText="Next" prevLinkText="Prev" [totalItems]="3" [itemsPerPage]="1" (previousClick)="yourGoBackFunction($event)" (pageClick)="yourGoToPageFunction($event)" (nextClick)="yourGoForwardFunction($event)">
</sprk-pagination>See below for available customization options:
| Input | Type | Description |
|---|---|---|
| paginationType | string | The type of the pagination you would like. Can be 'default', 'pager', or 'long'. |
| nextLinkText | string | The value supplied will be used as the text of the next link. |
| prevLinkText | string | The value supplied will be used as the text of the previous link. |
| totalItems | number | This is the total number of items in the data to be used for pagination. |
| itemsPerPage | number | This is the total number of items to render per page. |
| analyticsStringFirstLink | string | The value supplied will be assigned to the 'data-analytics' attribute on the first link. Intended for an outside library to capture data. |
| analyticsStringSecondLink | string | The value supplied will be assigned to the 'data-analytics' attribute on the second link. Intended for an outside library to capture data. |
| analyticsStringThirdLink | string | The value supplied will be assigned to the 'data-analytics' attribute on the third link. Intended for an outside library to capture data. |
| analyticsStringLinkNext | string | The value supplied will be assigned to the 'data-analytics' attribute on the next link. Intended for an outside library to capture data. |
| analyticsStringLinkPrev | string | The value supplied will be assigned to the 'data-analytics' attribute on the previous link. Intended for an outside library to capture data. |
| additionalClasses | string | Allows a string of classes to add, in addition to the Spark classes. Intended for overrides. |
| previousClick | function | Supply a function to the previousClick input to run when the previous link is clicked. On click, previousClick will emit the click event and current page. |
| nextClick | function | Supply a function to the nextClick input to run when the next link is clicked. On click, nextClick will emit the click event and current page. |
| pageClick | function | Supply a function to the pageClick input to run when the individual page links are clicked. On click, pageClick will emit the click event and current page. |
This pattern is for when you have more than three pages of content. When the next or previous links are tapped or clicked the page number decreases or increases respectively. When the user is on the first page the previous link should be disabled. When the user is on the last page the next link should be disabled. The current page should always be bold and highlighted by a background color.
The Long Pagination variant uses the same inputs as the default version except the paginationType should be set to 'long'.
<nav aria-label="Pagination Navigation" data-sprk-pagination="long">
<ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="prev">
Prev
</a>
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
1
</a>
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long" data-sprk-pagination="dots">
...
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long sprk-c-Pagination__item--current">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" aria-current="true" data-sprk-pagination="item">
11
</a>
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long" data-sprk-pagination="dots">
...
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="item">
22
</a>
</li>
<li class="sprk-c-Pagination__item sprk-c-Pagination__item--long">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#" data-sprk-pagination="next">
Next
</a>
</li>
</ul>
</nav>
<sprk-pagination additionalClasses="sprk-u-mbl" paginationType="long" nextLinkText="Next" prevLinkText="Prev" [currentPage]="1" [totalItems]="100" [itemsPerPage]="25" (previousClick)="yourGoBackFunction($event)" (pageClick)="yourGoToPageFunction($event)" (nextClick)="yourGoForwardFunction($event)">
</sprk-pagination>Use this pattern in the case where you need pagination but there is no need to show page numbers.
The Pager Pagination variant uses the same inputs as the default version except the paginationType should be set to 'pager'.
<nav aria-label="Pagination Navigation">
<ul class="sprk-c-Pagination sprk-b-List sprk-b-List--bare">
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="">
Prev
</a>
</li>
<li class="sprk-c-Pagination__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="">
Next
</a>
</li>
</ul>
</nav>
<sprk-pagination paginationType="pager" nextLinkText="Next" prevLinkText="Prev" [currentPage]="1" [totalItems]="40" [itemsPerPage]="10" (previousClick)="yourGoBack($event)" (pageClick)="yourGoToPage($event)" (nextClick)="yourGoForward($event)">
</sprk-pagination>