`<paginator>`

Defines a paginated section of content

<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

Attributes for `<paginator>`

Other (1)

initialPage

integer. Default value: 1. 1-based page index shown on first render.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<paginator name="p">`

Other (6)

$p.currentPage

integer. The currently displayed page (1-based).

$p.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$p.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$p.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$p.hidden

boolean. Whether this component is hidden from the rendered output.

$p.numPages

integer. The total number of pages.

Common to all components (4)

$p.doenetML

text. The DoenetML source code that produced this component.

$p.hide

boolean. Whether to hide this component from the rendered output.

$p.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$p.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

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

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 Examples

Attribute Example: initialPage

The initialPage attribute specifies the page number value that the user will see when the <paginator> is first rendered.

Property Examples

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>.

p paginatorControls

<paginator>