<paginator>
<paginator> is a Sectional
component that organizes content into discrete pages, allowing users to navigate through them one at a time.
To create navigation buttons for the paginator, this component is typically used in conjunction with the
<paginatorControls> component.
Attributes and Properties
| Attribute | Type | Values |
|---|---|---|
initialPage = "…" |
| Property | Type |
|---|---|
$p.currentPage | integer |
$p.disabled | boolean |
$p.fixed | boolean |
$p.fixLocation | boolean |
$p.hidden | boolean |
$p.numPages | integer |
Example: A basic <paginator> with bottom navigation
A <paginator> component creates a separate page for each sectional component it contains.
Sectional components are container elements for content, such as a <section>, <problem>, or <exercise>.
Users navigate through the pages using buttons generated by the <paginatorControls> component.
The <paginator> component must be assigned a name, which is then referenced
by the paginator attribute of the <paginatorControls> component.
Example: An image <paginator> with top navigation
A <paginator> component creates a separate page for each sectional component it contains.
Sectional components are container elements for content, such as a <section>, <problem>, or <exercise>.
Users navigate through the pages using buttons generated by the <paginatorControls> component.
The <paginator> component must be assigned a name, which is then referenced
by the paginator attribute of the <paginatorControls> component.
Example: A <paginator> that advances based on user interactions
The setPage actionName for a <callAction> component can be used with a <paginator> to
programmatically change the current page based on user interactions. Within the <callAction>, use the number
attribute to specify the page number to navigate to, and the triggerWhen attribute to
define the condition that triggers the page change.
Attribute Example: initialPage
The initialPage attribute specifies the page number value that the user will see when the
<paginator> is first rendered.
Property Example: currentPage, numPages
The currentPage property returns the current page number being displayed by the <paginator> component,
while the numPages property returns the number of total pages in the <paginator>.