API pagination

All following symbols can be imported from @agnos-ui/react-bootstrap/components/pagination

createPagination

function

createPagination(props?): PaginationWidget

Create a PaginationWidget with given config props

Parameters

• props?: PropsConfig<PaginationProps>

Returns

PaginationWidget

a PaginationWidget

DefaultPages

function

DefaultPages(slotContext): null | Element

Parameters

• slotContext: PaginationContext

Returns

null | Element

DefaultStructure

function

DefaultStructure(slotContext): Element

Parameters

• slotContext: PaginationContext

Returns

Element

DirectionsHrefs

interface

Properties

next: string

The href for the 'Next' direction link

previous: string

The href for the 'Previous' navigation link

getPaginationDefaultConfig

function

getPaginationDefaultConfig(): PaginationProps

Retrieve a shallow copy of the default Pagination config

Returns

PaginationProps

the default Pagination config

NavButton

function

NavButton(props): ReactNode

Parameters

• props: NavItemProps & RefAttributes<HTMLLIElement>

Returns

ReactNode

NavItemProps

interface

Properties

about?

optional about: string

accessKey?

optional accessKey: string

active?

optional active: boolean

activeLabel?

optional activeLabel: string

aria-activedescendant?

optional aria-activedescendant: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-atomic?

optional aria-atomic: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-autocomplete?

optional aria-autocomplete: "none" | "list" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

aria-braillelabel?

optional aria-braillelabel: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

See

aria-label.

aria-brailleroledescription?

optional aria-brailleroledescription: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

See

aria-roledescription.

aria-busy?

optional aria-busy: Booleanish

aria-checked?

optional aria-checked: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See

aria-pressed
aria-selected.

aria-colcount?

optional aria-colcount: number

Defines the total number of columns in a table, grid, or treegrid.

See

aria-colindex.

aria-colindex?

optional aria-colindex: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

See

aria-colcount
aria-colspan.

aria-colindextext?

optional aria-colindextext: string

Defines a human readable text alternative of aria-colindex.

See

aria-rowindextext.

aria-colspan?

optional aria-colspan: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See

aria-colindex
aria-rowspan.

aria-controls?

optional aria-controls: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See

aria-owns.

aria-current?

optional aria-current: boolean | "page" | "true" | "time" | "false" | "date" | "step" | "location"

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby?

optional aria-describedby: string

Identifies the element (or elements) that describes the object.

See

aria-labelledby

aria-description?

optional aria-description: string

Defines a string value that describes or annotates the current element.

See

related aria-describedby.

aria-details?

optional aria-details: string

Identifies the element that provides a detailed, extended description for the object.

See

aria-describedby.

aria-disabled?

optional aria-disabled: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See

aria-hidden
aria-readonly.

~~aria-dropeffect?~~

optional aria-dropeffect: "link" | "copy" | "none" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated

in ARIA 1.1

aria-errormessage?

optional aria-errormessage: string

Identifies the element that provides an error message for the object.

See

aria-invalid
aria-describedby.

aria-expanded?

optional aria-expanded: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowto?

optional aria-flowto: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.

~~aria-grabbed?~~

optional aria-grabbed: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

Deprecated

in ARIA 1.1

aria-haspopup?

optional aria-haspopup: boolean | "grid" | "true" | "dialog" | "menu" | "listbox" | "tree" | "false"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden?

optional aria-hidden: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

aria-invalid?

optional aria-invalid: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See

aria-errormessage.

aria-keyshortcuts?

optional aria-keyshortcuts: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label?

optional aria-label: string

Defines a string value that labels the current element.

See

aria-labelledby.

aria-labelledby?

optional aria-labelledby: string

Identifies the element (or elements) that labels the current element.

See

aria-describedby.

aria-level?

optional aria-level: number

Defines the hierarchical level of an element within a structure.

aria-live?

optional aria-live: "off" | "polite" | "assertive"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

optional aria-modal: Booleanish

Indicates whether an element is modal when displayed.

aria-multiline?

optional aria-multiline: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable?

optional aria-multiselectable: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation?

optional aria-orientation: "vertical" | "horizontal"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-owns?

optional aria-owns: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

See

aria-controls.

aria-placeholder?

optional aria-placeholder: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

aria-posinset?

optional aria-posinset: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-setsize.

aria-pressed?

optional aria-pressed: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

See

aria-checked
aria-selected.

aria-readonly?

optional aria-readonly: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See

aria-disabled.

aria-relevant?

optional aria-relevant: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See

aria-atomic.

aria-required?

optional aria-required: Booleanish

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription?

optional aria-roledescription: string

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount?

optional aria-rowcount: number

Defines the total number of rows in a table, grid, or treegrid.

See

aria-rowindex.

aria-rowindex?

optional aria-rowindex: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

See

aria-rowcount
aria-rowspan.

aria-rowindextext?

optional aria-rowindextext: string

Defines a human readable text alternative of aria-rowindex.

See

aria-colindextext.

aria-rowspan?

optional aria-rowspan: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See

aria-rowindex
aria-colspan.

aria-selected?

optional aria-selected: Booleanish

Indicates the current "selected" state of various widgets.

See

aria-checked
aria-pressed.

aria-setsize?

optional aria-setsize: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-posinset.

aria-sort?

optional aria-sort: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax?

optional aria-valuemax: number

Defines the maximum allowed value for a range widget.

aria-valuemin?

optional aria-valuemin: number

Defines the minimum allowed value for a range widget.

aria-valuenow?

optional aria-valuenow: number

Defines the current value for a range widget.

See

aria-valuetext.

aria-valuetext?

optional aria-valuetext: string

Defines the human readable text alternative of aria-valuenow for a range widget.

autoCapitalize?

optional autoCapitalize: string

autoCorrect?

optional autoCorrect: string

autoFocus?

optional autoFocus: boolean

autoSave?

optional autoSave: string

children?

optional children: ReactNode

className?

optional className: string

color?

optional color: string

content?

optional content: string

contentEditable?

optional contentEditable: Booleanish | "inherit" | "plaintext-only"

contextMenu?

optional contextMenu: string

dangerouslySetInnerHTML?

optional dangerouslySetInnerHTML: object

\__html

__html: string | TrustedHTML

datatype?

optional datatype: string

defaultChecked?

optional defaultChecked: boolean

defaultValue?

optional defaultValue: string | number | readonly string[]

dir?

optional dir: string

directive

directive: Directive

disabled?

optional disabled: boolean

draggable?

optional draggable: Booleanish

hidden?

optional hidden: boolean

id?

optional id: string

inlist?

optional inlist: any

inputMode?

optional inputMode: "search" | "none" | "text" | "url" | "tel" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

is?

optional is: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

itemID?

optional itemID: string

itemProp?

optional itemProp: string

itemRef?

optional itemRef: string

itemScope?

optional itemScope: boolean

itemType?

optional itemType: string

lang?

optional lang: string

nonce?

optional nonce: string

onAbort?

optional onAbort: ReactEventHandler<HTMLAnchorElement>

onAbortCapture?

optional onAbortCapture: ReactEventHandler<HTMLAnchorElement>

onAnimationEnd?

optional onAnimationEnd: AnimationEventHandler<HTMLAnchorElement>

onAnimationEndCapture?

optional onAnimationEndCapture: AnimationEventHandler<HTMLAnchorElement>

onAnimationIteration?

optional onAnimationIteration: AnimationEventHandler<HTMLAnchorElement>

onAnimationIterationCapture?

optional onAnimationIterationCapture: AnimationEventHandler<HTMLAnchorElement>

onAnimationStart?

optional onAnimationStart: AnimationEventHandler<HTMLAnchorElement>

onAnimationStartCapture?

optional onAnimationStartCapture: AnimationEventHandler<HTMLAnchorElement>

onAuxClick?

optional onAuxClick: MouseEventHandler<HTMLAnchorElement>

onAuxClickCapture?

optional onAuxClickCapture: MouseEventHandler<HTMLAnchorElement>

onBeforeInput?

optional onBeforeInput: FormEventHandler<HTMLAnchorElement>

onBeforeInputCapture?

optional onBeforeInputCapture: FormEventHandler<HTMLAnchorElement>

onBlur?

optional onBlur: FocusEventHandler<HTMLAnchorElement>

onBlurCapture?

optional onBlurCapture: FocusEventHandler<HTMLAnchorElement>

onCanPlay?

optional onCanPlay: ReactEventHandler<HTMLAnchorElement>

onCanPlayCapture?

optional onCanPlayCapture: ReactEventHandler<HTMLAnchorElement>

onCanPlayThrough?

optional onCanPlayThrough: ReactEventHandler<HTMLAnchorElement>

onCanPlayThroughCapture?

optional onCanPlayThroughCapture: ReactEventHandler<HTMLAnchorElement>

onChange?

optional onChange: FormEventHandler<HTMLAnchorElement>

onChangeCapture?

optional onChangeCapture: FormEventHandler<HTMLAnchorElement>

onClick?

optional onClick: MouseEventHandler<HTMLAnchorElement>

onClickCapture?

optional onClickCapture: MouseEventHandler<HTMLAnchorElement>

onCompositionEnd?

optional onCompositionEnd: CompositionEventHandler<HTMLAnchorElement>

onCompositionEndCapture?

optional onCompositionEndCapture: CompositionEventHandler<HTMLAnchorElement>

onCompositionStart?

optional onCompositionStart: CompositionEventHandler<HTMLAnchorElement>

onCompositionStartCapture?

optional onCompositionStartCapture: CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdate?

optional onCompositionUpdate: CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdateCapture?

optional onCompositionUpdateCapture: CompositionEventHandler<HTMLAnchorElement>

onContextMenu?

optional onContextMenu: MouseEventHandler<HTMLAnchorElement>

onContextMenuCapture?

optional onContextMenuCapture: MouseEventHandler<HTMLAnchorElement>

onCopy?

optional onCopy: ClipboardEventHandler<HTMLAnchorElement>

onCopyCapture?

optional onCopyCapture: ClipboardEventHandler<HTMLAnchorElement>

onCut?

optional onCut: ClipboardEventHandler<HTMLAnchorElement>

onCutCapture?

optional onCutCapture: ClipboardEventHandler<HTMLAnchorElement>

onDoubleClick?

optional onDoubleClick: MouseEventHandler<HTMLAnchorElement>

onDoubleClickCapture?

optional onDoubleClickCapture: MouseEventHandler<HTMLAnchorElement>

onDrag?

optional onDrag: DragEventHandler<HTMLAnchorElement>

onDragCapture?

optional onDragCapture: DragEventHandler<HTMLAnchorElement>

onDragEnd?

optional onDragEnd: DragEventHandler<HTMLAnchorElement>

onDragEndCapture?

optional onDragEndCapture: DragEventHandler<HTMLAnchorElement>

onDragEnter?

optional onDragEnter: DragEventHandler<HTMLAnchorElement>

onDragEnterCapture?

optional onDragEnterCapture: DragEventHandler<HTMLAnchorElement>

onDragExit?

optional onDragExit: DragEventHandler<HTMLAnchorElement>

onDragExitCapture?

optional onDragExitCapture: DragEventHandler<HTMLAnchorElement>

onDragLeave?

optional onDragLeave: DragEventHandler<HTMLAnchorElement>

onDragLeaveCapture?

optional onDragLeaveCapture: DragEventHandler<HTMLAnchorElement>

onDragOver?

optional onDragOver: DragEventHandler<HTMLAnchorElement>

onDragOverCapture?

optional onDragOverCapture: DragEventHandler<HTMLAnchorElement>

onDragStart?

optional onDragStart: DragEventHandler<HTMLAnchorElement>

onDragStartCapture?

optional onDragStartCapture: DragEventHandler<HTMLAnchorElement>

onDrop?

optional onDrop: DragEventHandler<HTMLAnchorElement>

onDropCapture?

optional onDropCapture: DragEventHandler<HTMLAnchorElement>

onDurationChange?

optional onDurationChange: ReactEventHandler<HTMLAnchorElement>

onDurationChangeCapture?

optional onDurationChangeCapture: ReactEventHandler<HTMLAnchorElement>

onEmptied?

optional onEmptied: ReactEventHandler<HTMLAnchorElement>

onEmptiedCapture?

optional onEmptiedCapture: ReactEventHandler<HTMLAnchorElement>

onEncrypted?

optional onEncrypted: ReactEventHandler<HTMLAnchorElement>

onEncryptedCapture?

optional onEncryptedCapture: ReactEventHandler<HTMLAnchorElement>

onEnded?

optional onEnded: ReactEventHandler<HTMLAnchorElement>

onEndedCapture?

optional onEndedCapture: ReactEventHandler<HTMLAnchorElement>

onError?

optional onError: ReactEventHandler<HTMLAnchorElement>

onErrorCapture?

optional onErrorCapture: ReactEventHandler<HTMLAnchorElement>

onFocus?

optional onFocus: FocusEventHandler<HTMLAnchorElement>

onFocusCapture?

optional onFocusCapture: FocusEventHandler<HTMLAnchorElement>

onGotPointerCapture?

optional onGotPointerCapture: PointerEventHandler<HTMLAnchorElement>

onGotPointerCaptureCapture?

optional onGotPointerCaptureCapture: PointerEventHandler<HTMLAnchorElement>

onInput?

optional onInput: FormEventHandler<HTMLAnchorElement>

onInputCapture?

optional onInputCapture: FormEventHandler<HTMLAnchorElement>

onInvalid?

optional onInvalid: FormEventHandler<HTMLAnchorElement>

onInvalidCapture?

optional onInvalidCapture: FormEventHandler<HTMLAnchorElement>

onKeyDown?

optional onKeyDown: KeyboardEventHandler<HTMLAnchorElement>

onKeyDownCapture?

optional onKeyDownCapture: KeyboardEventHandler<HTMLAnchorElement>

~~onKeyPress?~~

optional onKeyPress: KeyboardEventHandler<HTMLAnchorElement>

Deprecated

~~onKeyPressCapture?~~

optional onKeyPressCapture: KeyboardEventHandler<HTMLAnchorElement>

Deprecated

onKeyUp?

optional onKeyUp: KeyboardEventHandler<HTMLAnchorElement>

onKeyUpCapture?

optional onKeyUpCapture: KeyboardEventHandler<HTMLAnchorElement>

onLoad?

optional onLoad: ReactEventHandler<HTMLAnchorElement>

onLoadCapture?

optional onLoadCapture: ReactEventHandler<HTMLAnchorElement>

onLoadStart?

optional onLoadStart: ReactEventHandler<HTMLAnchorElement>

onLoadStartCapture?

optional onLoadStartCapture: ReactEventHandler<HTMLAnchorElement>

onLoadedData?

optional onLoadedData: ReactEventHandler<HTMLAnchorElement>

onLoadedDataCapture?

optional onLoadedDataCapture: ReactEventHandler<HTMLAnchorElement>

onLoadedMetadata?

optional onLoadedMetadata: ReactEventHandler<HTMLAnchorElement>

onLoadedMetadataCapture?

optional onLoadedMetadataCapture: ReactEventHandler<HTMLAnchorElement>

onLostPointerCapture?

optional onLostPointerCapture: PointerEventHandler<HTMLAnchorElement>

onLostPointerCaptureCapture?

optional onLostPointerCaptureCapture: PointerEventHandler<HTMLAnchorElement>

onMouseDown?

optional onMouseDown: MouseEventHandler<HTMLAnchorElement>

onMouseDownCapture?

optional onMouseDownCapture: MouseEventHandler<HTMLAnchorElement>

onMouseEnter?

optional onMouseEnter: MouseEventHandler<HTMLAnchorElement>

onMouseLeave?

optional onMouseLeave: MouseEventHandler<HTMLAnchorElement>

onMouseMove?

optional onMouseMove: MouseEventHandler<HTMLAnchorElement>

onMouseMoveCapture?

optional onMouseMoveCapture: MouseEventHandler<HTMLAnchorElement>

onMouseOut?

optional onMouseOut: MouseEventHandler<HTMLAnchorElement>

onMouseOutCapture?

optional onMouseOutCapture: MouseEventHandler<HTMLAnchorElement>

onMouseOver?

optional onMouseOver: MouseEventHandler<HTMLAnchorElement>

onMouseOverCapture?

optional onMouseOverCapture: MouseEventHandler<HTMLAnchorElement>

onMouseUp?

optional onMouseUp: MouseEventHandler<HTMLAnchorElement>

onMouseUpCapture?

optional onMouseUpCapture: MouseEventHandler<HTMLAnchorElement>

onPaste?

optional onPaste: ClipboardEventHandler<HTMLAnchorElement>

onPasteCapture?

optional onPasteCapture: ClipboardEventHandler<HTMLAnchorElement>

onPause?

optional onPause: ReactEventHandler<HTMLAnchorElement>

onPauseCapture?

optional onPauseCapture: ReactEventHandler<HTMLAnchorElement>

onPlay?

optional onPlay: ReactEventHandler<HTMLAnchorElement>

onPlayCapture?

optional onPlayCapture: ReactEventHandler<HTMLAnchorElement>

onPlaying?

optional onPlaying: ReactEventHandler<HTMLAnchorElement>

onPlayingCapture?

optional onPlayingCapture: ReactEventHandler<HTMLAnchorElement>

onPointerCancel?

optional onPointerCancel: PointerEventHandler<HTMLAnchorElement>

onPointerCancelCapture?

optional onPointerCancelCapture: PointerEventHandler<HTMLAnchorElement>

onPointerDown?

optional onPointerDown: PointerEventHandler<HTMLAnchorElement>

onPointerDownCapture?

optional onPointerDownCapture: PointerEventHandler<HTMLAnchorElement>

onPointerEnter?

optional onPointerEnter: PointerEventHandler<HTMLAnchorElement>

onPointerLeave?

optional onPointerLeave: PointerEventHandler<HTMLAnchorElement>

onPointerMove?

optional onPointerMove: PointerEventHandler<HTMLAnchorElement>

onPointerMoveCapture?

optional onPointerMoveCapture: PointerEventHandler<HTMLAnchorElement>

onPointerOut?

optional onPointerOut: PointerEventHandler<HTMLAnchorElement>

onPointerOutCapture?

optional onPointerOutCapture: PointerEventHandler<HTMLAnchorElement>

onPointerOver?

optional onPointerOver: PointerEventHandler<HTMLAnchorElement>

onPointerOverCapture?

optional onPointerOverCapture: PointerEventHandler<HTMLAnchorElement>

onPointerUp?

optional onPointerUp: PointerEventHandler<HTMLAnchorElement>

onPointerUpCapture?

optional onPointerUpCapture: PointerEventHandler<HTMLAnchorElement>

onProgress?

optional onProgress: ReactEventHandler<HTMLAnchorElement>

onProgressCapture?

optional onProgressCapture: ReactEventHandler<HTMLAnchorElement>

onRateChange?

optional onRateChange: ReactEventHandler<HTMLAnchorElement>

onRateChangeCapture?

optional onRateChangeCapture: ReactEventHandler<HTMLAnchorElement>

onReset?

optional onReset: FormEventHandler<HTMLAnchorElement>

onResetCapture?

optional onResetCapture: FormEventHandler<HTMLAnchorElement>

onResize?

optional onResize: ReactEventHandler<HTMLAnchorElement>

onResizeCapture?

optional onResizeCapture: ReactEventHandler<HTMLAnchorElement>

onScroll?

optional onScroll: UIEventHandler<HTMLAnchorElement>

onScrollCapture?

optional onScrollCapture: UIEventHandler<HTMLAnchorElement>

onSeeked?

optional onSeeked: ReactEventHandler<HTMLAnchorElement>

onSeekedCapture?

optional onSeekedCapture: ReactEventHandler<HTMLAnchorElement>

onSeeking?

optional onSeeking: ReactEventHandler<HTMLAnchorElement>

onSeekingCapture?

optional onSeekingCapture: ReactEventHandler<HTMLAnchorElement>

onSelect?

optional onSelect: ReactEventHandler<HTMLAnchorElement>

onSelectCapture?

optional onSelectCapture: ReactEventHandler<HTMLAnchorElement>

onStalled?

optional onStalled: ReactEventHandler<HTMLAnchorElement>

onStalledCapture?

optional onStalledCapture: ReactEventHandler<HTMLAnchorElement>

onSubmit?

optional onSubmit: FormEventHandler<HTMLAnchorElement>

onSubmitCapture?

optional onSubmitCapture: FormEventHandler<HTMLAnchorElement>

onSuspend?

optional onSuspend: ReactEventHandler<HTMLAnchorElement>

onSuspendCapture?

optional onSuspendCapture: ReactEventHandler<HTMLAnchorElement>

onTimeUpdate?

optional onTimeUpdate: ReactEventHandler<HTMLAnchorElement>

onTimeUpdateCapture?

optional onTimeUpdateCapture: ReactEventHandler<HTMLAnchorElement>

onTouchCancel?

optional onTouchCancel: TouchEventHandler<HTMLAnchorElement>

onTouchCancelCapture?

optional onTouchCancelCapture: TouchEventHandler<HTMLAnchorElement>

onTouchEnd?

optional onTouchEnd: TouchEventHandler<HTMLAnchorElement>

onTouchEndCapture?

optional onTouchEndCapture: TouchEventHandler<HTMLAnchorElement>

onTouchMove?

optional onTouchMove: TouchEventHandler<HTMLAnchorElement>

onTouchMoveCapture?

optional onTouchMoveCapture: TouchEventHandler<HTMLAnchorElement>

onTouchStart?

optional onTouchStart: TouchEventHandler<HTMLAnchorElement>

onTouchStartCapture?

optional onTouchStartCapture: TouchEventHandler<HTMLAnchorElement>

onTransitionEnd?

optional onTransitionEnd: TransitionEventHandler<HTMLAnchorElement>

onTransitionEndCapture?

optional onTransitionEndCapture: TransitionEventHandler<HTMLAnchorElement>

onVolumeChange?

optional onVolumeChange: ReactEventHandler<HTMLAnchorElement>

onVolumeChangeCapture?

optional onVolumeChangeCapture: ReactEventHandler<HTMLAnchorElement>

onWaiting?

optional onWaiting: ReactEventHandler<HTMLAnchorElement>

onWaitingCapture?

optional onWaitingCapture: ReactEventHandler<HTMLAnchorElement>

onWheel?

optional onWheel: WheelEventHandler<HTMLAnchorElement>

onWheelCapture?

optional onWheelCapture: WheelEventHandler<HTMLAnchorElement>

prefix?

optional prefix: string

property?

optional property: string

radioGroup?

optional radioGroup: string

rel?

optional rel: string

resource?

optional resource: string

results?

optional results: number

rev?

optional rev: string

role?

optional role: AriaRole

security?

optional security: string

slot?

optional slot: string

spellCheck?

optional spellCheck: Booleanish

style?

optional style: CSSProperties

suppressContentEditableWarning?

optional suppressContentEditableWarning: boolean

suppressHydrationWarning?

optional suppressHydrationWarning: boolean

tabIndex?

optional tabIndex: number

title?

optional title: string

translate?

optional translate: "yes" | "no"

typeof?

optional typeof: string

unselectable?

optional unselectable: "off" | "on"

vocab?

optional vocab: string

PageItem

function

PageItem(props): ReactNode

Parameters

• props: PageItemProps & RefAttributes<HTMLLIElement>

Returns

ReactNode

PageItemProps

interface

Properties

about?

optional about: string

accessKey?

optional accessKey: string

active?

optional active: boolean

activeLabel?

optional activeLabel: string

aria-activedescendant?

optional aria-activedescendant: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

aria-atomic?

optional aria-atomic: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

aria-autocomplete?

optional aria-autocomplete: "none" | "list" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

aria-braillelabel?

optional aria-braillelabel: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

See

aria-label.

aria-brailleroledescription?

optional aria-brailleroledescription: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

See

aria-roledescription.

aria-busy?

optional aria-busy: Booleanish

aria-checked?

optional aria-checked: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

See

aria-pressed
aria-selected.

aria-colcount?

optional aria-colcount: number

Defines the total number of columns in a table, grid, or treegrid.

See

aria-colindex.

aria-colindex?

optional aria-colindex: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

See

aria-colcount
aria-colspan.

aria-colindextext?

optional aria-colindextext: string

Defines a human readable text alternative of aria-colindex.

See

aria-rowindextext.

aria-colspan?

optional aria-colspan: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

See

aria-colindex
aria-rowspan.

aria-controls?

optional aria-controls: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

See

aria-owns.

aria-current?

optional aria-current: boolean | "page" | "true" | "time" | "false" | "date" | "step" | "location"

Indicates the element that represents the current item within a container or set of related elements.

aria-describedby?

optional aria-describedby: string

Identifies the element (or elements) that describes the object.

See

aria-labelledby

aria-description?

optional aria-description: string

Defines a string value that describes or annotates the current element.

See

related aria-describedby.

aria-details?

optional aria-details: string

Identifies the element that provides a detailed, extended description for the object.

See

aria-describedby.

aria-disabled?

optional aria-disabled: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

See

aria-hidden
aria-readonly.

~~aria-dropeffect?~~

optional aria-dropeffect: "link" | "copy" | "none" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

Deprecated

in ARIA 1.1

aria-errormessage?

optional aria-errormessage: string

Identifies the element that provides an error message for the object.

See

aria-invalid
aria-describedby.

aria-expanded?

optional aria-expanded: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

aria-flowto?

optional aria-flowto: string

~~aria-grabbed?~~

optional aria-grabbed: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

Deprecated

in ARIA 1.1

aria-haspopup?

optional aria-haspopup: boolean | "grid" | "true" | "dialog" | "menu" | "listbox" | "tree" | "false"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

aria-hidden?

optional aria-hidden: Booleanish

Indicates whether the element is exposed to an accessibility API.

See

aria-disabled.

aria-invalid?

optional aria-invalid: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

See

aria-errormessage.

aria-keyshortcuts?

optional aria-keyshortcuts: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

aria-label?

optional aria-label: string

Defines a string value that labels the current element.

See

aria-labelledby.

aria-labelledby?

optional aria-labelledby: string

Identifies the element (or elements) that labels the current element.

See

aria-describedby.

aria-level?

optional aria-level: number

Defines the hierarchical level of an element within a structure.

aria-live?

optional aria-live: "off" | "polite" | "assertive"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

optional aria-modal: Booleanish

Indicates whether an element is modal when displayed.

aria-multiline?

optional aria-multiline: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

aria-multiselectable?

optional aria-multiselectable: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

aria-orientation?

optional aria-orientation: "vertical" | "horizontal"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

aria-owns?

optional aria-owns: string

See

aria-controls.

aria-placeholder?

optional aria-placeholder: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

aria-posinset?

optional aria-posinset: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-setsize.

aria-pressed?

optional aria-pressed: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

See

aria-checked
aria-selected.

aria-readonly?

optional aria-readonly: Booleanish

Indicates that the element is not editable, but is otherwise operable.

See

aria-disabled.

aria-relevant?

optional aria-relevant: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

See

aria-atomic.

aria-required?

optional aria-required: Booleanish

Indicates that user input is required on the element before a form may be submitted.

aria-roledescription?

optional aria-roledescription: string

Defines a human-readable, author-localized description for the role of an element.

aria-rowcount?

optional aria-rowcount: number

Defines the total number of rows in a table, grid, or treegrid.

See

aria-rowindex.

aria-rowindex?

optional aria-rowindex: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

See

aria-rowcount
aria-rowspan.

aria-rowindextext?

optional aria-rowindextext: string

Defines a human readable text alternative of aria-rowindex.

See

aria-colindextext.

aria-rowspan?

optional aria-rowspan: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

See

aria-rowindex
aria-colspan.

aria-selected?

optional aria-selected: Booleanish

Indicates the current "selected" state of various widgets.

See

aria-checked
aria-pressed.

aria-setsize?

optional aria-setsize: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

See

aria-posinset.

aria-sort?

optional aria-sort: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

aria-valuemax?

optional aria-valuemax: number

Defines the maximum allowed value for a range widget.

aria-valuemin?

optional aria-valuemin: number

Defines the minimum allowed value for a range widget.

aria-valuenow?

optional aria-valuenow: number

Defines the current value for a range widget.

See

aria-valuetext.

aria-valuetext?

optional aria-valuetext: string

Defines the human readable text alternative of aria-valuenow for a range widget.

autoCapitalize?

optional autoCapitalize: string

autoCorrect?

optional autoCorrect: string

autoFocus?

optional autoFocus: boolean

autoSave?

optional autoSave: string

children?

optional children: ReactNode

className?

optional className: string

color?

optional color: string

content?

optional content: string

contentEditable?

optional contentEditable: Booleanish | "inherit" | "plaintext-only"

contextMenu?

optional contextMenu: string

dangerouslySetInnerHTML?

optional dangerouslySetInnerHTML: object

\__html

__html: string | TrustedHTML

datatype?

optional datatype: string

defaultChecked?

optional defaultChecked: boolean

defaultValue?

optional defaultValue: string | number | readonly string[]

dir?

optional dir: string

directive

directive: Directive<object>

Type declaration

page

page: number

disabled?

optional disabled: boolean

draggable?

optional draggable: Booleanish

hidden?

optional hidden: boolean

id?

optional id: string

inlist?

optional inlist: any

inputMode?

optional inputMode: "search" | "none" | "text" | "url" | "tel" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

is?

optional is: string

Specify that a standard HTML element should behave like a defined custom built-in element

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

itemID?

optional itemID: string

itemProp?

optional itemProp: string

itemRef?

optional itemRef: string

itemScope?

optional itemScope: boolean

itemType?

optional itemType: string

lang?

optional lang: string

nonce?

optional nonce: string

onAbort?

optional onAbort: ReactEventHandler<HTMLAnchorElement>

onAbortCapture?

optional onAbortCapture: ReactEventHandler<HTMLAnchorElement>

onAnimationEnd?

optional onAnimationEnd: AnimationEventHandler<HTMLAnchorElement>

onAnimationEndCapture?

optional onAnimationEndCapture: AnimationEventHandler<HTMLAnchorElement>

onAnimationIteration?

optional onAnimationIteration: AnimationEventHandler<HTMLAnchorElement>

onAnimationIterationCapture?

optional onAnimationIterationCapture: AnimationEventHandler<HTMLAnchorElement>

onAnimationStart?

optional onAnimationStart: AnimationEventHandler<HTMLAnchorElement>

onAnimationStartCapture?

optional onAnimationStartCapture: AnimationEventHandler<HTMLAnchorElement>

onAuxClick?

optional onAuxClick: MouseEventHandler<HTMLAnchorElement>

onAuxClickCapture?

optional onAuxClickCapture: MouseEventHandler<HTMLAnchorElement>

onBeforeInput?

optional onBeforeInput: FormEventHandler<HTMLAnchorElement>

onBeforeInputCapture?

optional onBeforeInputCapture: FormEventHandler<HTMLAnchorElement>

onBlur?

optional onBlur: FocusEventHandler<HTMLAnchorElement>

onBlurCapture?

optional onBlurCapture: FocusEventHandler<HTMLAnchorElement>

onCanPlay?

optional onCanPlay: ReactEventHandler<HTMLAnchorElement>

onCanPlayCapture?

optional onCanPlayCapture: ReactEventHandler<HTMLAnchorElement>

onCanPlayThrough?

optional onCanPlayThrough: ReactEventHandler<HTMLAnchorElement>

onCanPlayThroughCapture?

optional onCanPlayThroughCapture: ReactEventHandler<HTMLAnchorElement>

onChange?

optional onChange: FormEventHandler<HTMLAnchorElement>

onChangeCapture?

optional onChangeCapture: FormEventHandler<HTMLAnchorElement>

onClick?

optional onClick: MouseEventHandler<HTMLAnchorElement>

onClickCapture?

optional onClickCapture: MouseEventHandler<HTMLAnchorElement>

onCompositionEnd?

optional onCompositionEnd: CompositionEventHandler<HTMLAnchorElement>

onCompositionEndCapture?

optional onCompositionEndCapture: CompositionEventHandler<HTMLAnchorElement>

onCompositionStart?

optional onCompositionStart: CompositionEventHandler<HTMLAnchorElement>

onCompositionStartCapture?

optional onCompositionStartCapture: CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdate?

optional onCompositionUpdate: CompositionEventHandler<HTMLAnchorElement>

onCompositionUpdateCapture?

optional onCompositionUpdateCapture: CompositionEventHandler<HTMLAnchorElement>

onContextMenu?

optional onContextMenu: MouseEventHandler<HTMLAnchorElement>

onContextMenuCapture?

optional onContextMenuCapture: MouseEventHandler<HTMLAnchorElement>

onCopy?

optional onCopy: ClipboardEventHandler<HTMLAnchorElement>

onCopyCapture?

optional onCopyCapture: ClipboardEventHandler<HTMLAnchorElement>

onCut?

optional onCut: ClipboardEventHandler<HTMLAnchorElement>

onCutCapture?

optional onCutCapture: ClipboardEventHandler<HTMLAnchorElement>

onDoubleClick?

optional onDoubleClick: MouseEventHandler<HTMLAnchorElement>

onDoubleClickCapture?

optional onDoubleClickCapture: MouseEventHandler<HTMLAnchorElement>

onDrag?

optional onDrag: DragEventHandler<HTMLAnchorElement>

onDragCapture?

optional onDragCapture: DragEventHandler<HTMLAnchorElement>

onDragEnd?

optional onDragEnd: DragEventHandler<HTMLAnchorElement>

onDragEndCapture?

optional onDragEndCapture: DragEventHandler<HTMLAnchorElement>

onDragEnter?

optional onDragEnter: DragEventHandler<HTMLAnchorElement>

onDragEnterCapture?

optional onDragEnterCapture: DragEventHandler<HTMLAnchorElement>

onDragExit?

optional onDragExit: DragEventHandler<HTMLAnchorElement>

onDragExitCapture?

optional onDragExitCapture: DragEventHandler<HTMLAnchorElement>

onDragLeave?

optional onDragLeave: DragEventHandler<HTMLAnchorElement>

onDragLeaveCapture?

optional onDragLeaveCapture: DragEventHandler<HTMLAnchorElement>

onDragOver?

optional onDragOver: DragEventHandler<HTMLAnchorElement>

onDragOverCapture?

optional onDragOverCapture: DragEventHandler<HTMLAnchorElement>

onDragStart?

optional onDragStart: DragEventHandler<HTMLAnchorElement>

onDragStartCapture?

optional onDragStartCapture: DragEventHandler<HTMLAnchorElement>

onDrop?

optional onDrop: DragEventHandler<HTMLAnchorElement>

onDropCapture?

optional onDropCapture: DragEventHandler<HTMLAnchorElement>

onDurationChange?

optional onDurationChange: ReactEventHandler<HTMLAnchorElement>

onDurationChangeCapture?

optional onDurationChangeCapture: ReactEventHandler<HTMLAnchorElement>

onEmptied?

optional onEmptied: ReactEventHandler<HTMLAnchorElement>

onEmptiedCapture?

optional onEmptiedCapture: ReactEventHandler<HTMLAnchorElement>

onEncrypted?

optional onEncrypted: ReactEventHandler<HTMLAnchorElement>

onEncryptedCapture?

optional onEncryptedCapture: ReactEventHandler<HTMLAnchorElement>

onEnded?

optional onEnded: ReactEventHandler<HTMLAnchorElement>

onEndedCapture?

optional onEndedCapture: ReactEventHandler<HTMLAnchorElement>

onError?

optional onError: ReactEventHandler<HTMLAnchorElement>

onErrorCapture?

optional onErrorCapture: ReactEventHandler<HTMLAnchorElement>

onFocus?

optional onFocus: FocusEventHandler<HTMLAnchorElement>

onFocusCapture?

optional onFocusCapture: FocusEventHandler<HTMLAnchorElement>

onGotPointerCapture?

optional onGotPointerCapture: PointerEventHandler<HTMLAnchorElement>

onGotPointerCaptureCapture?

optional onGotPointerCaptureCapture: PointerEventHandler<HTMLAnchorElement>

onInput?

optional onInput: FormEventHandler<HTMLAnchorElement>

onInputCapture?

optional onInputCapture: FormEventHandler<HTMLAnchorElement>

onInvalid?

optional onInvalid: FormEventHandler<HTMLAnchorElement>

onInvalidCapture?

optional onInvalidCapture: FormEventHandler<HTMLAnchorElement>

onKeyDown?

optional onKeyDown: KeyboardEventHandler<HTMLAnchorElement>

onKeyDownCapture?

optional onKeyDownCapture: KeyboardEventHandler<HTMLAnchorElement>

~~onKeyPress?~~

optional onKeyPress: KeyboardEventHandler<HTMLAnchorElement>

Deprecated

~~onKeyPressCapture?~~

optional onKeyPressCapture: KeyboardEventHandler<HTMLAnchorElement>

Deprecated

onKeyUp?

optional onKeyUp: KeyboardEventHandler<HTMLAnchorElement>

onKeyUpCapture?

optional onKeyUpCapture: KeyboardEventHandler<HTMLAnchorElement>

onLoad?

optional onLoad: ReactEventHandler<HTMLAnchorElement>

onLoadCapture?

optional onLoadCapture: ReactEventHandler<HTMLAnchorElement>

onLoadStart?

optional onLoadStart: ReactEventHandler<HTMLAnchorElement>

onLoadStartCapture?

optional onLoadStartCapture: ReactEventHandler<HTMLAnchorElement>

onLoadedData?

optional onLoadedData: ReactEventHandler<HTMLAnchorElement>

onLoadedDataCapture?

optional onLoadedDataCapture: ReactEventHandler<HTMLAnchorElement>

onLoadedMetadata?

optional onLoadedMetadata: ReactEventHandler<HTMLAnchorElement>

onLoadedMetadataCapture?

optional onLoadedMetadataCapture: ReactEventHandler<HTMLAnchorElement>

onLostPointerCapture?

optional onLostPointerCapture: PointerEventHandler<HTMLAnchorElement>

onLostPointerCaptureCapture?

optional onLostPointerCaptureCapture: PointerEventHandler<HTMLAnchorElement>

onMouseDown?

optional onMouseDown: MouseEventHandler<HTMLAnchorElement>

onMouseDownCapture?

optional onMouseDownCapture: MouseEventHandler<HTMLAnchorElement>

onMouseEnter?

optional onMouseEnter: MouseEventHandler<HTMLAnchorElement>

onMouseLeave?

optional onMouseLeave: MouseEventHandler<HTMLAnchorElement>

onMouseMove?

optional onMouseMove: MouseEventHandler<HTMLAnchorElement>

onMouseMoveCapture?

optional onMouseMoveCapture: MouseEventHandler<HTMLAnchorElement>

onMouseOut?

optional onMouseOut: MouseEventHandler<HTMLAnchorElement>

onMouseOutCapture?

optional onMouseOutCapture: MouseEventHandler<HTMLAnchorElement>

onMouseOver?

optional onMouseOver: MouseEventHandler<HTMLAnchorElement>

onMouseOverCapture?

optional onMouseOverCapture: MouseEventHandler<HTMLAnchorElement>

onMouseUp?

optional onMouseUp: MouseEventHandler<HTMLAnchorElement>

onMouseUpCapture?

optional onMouseUpCapture: MouseEventHandler<HTMLAnchorElement>

onPaste?

optional onPaste: ClipboardEventHandler<HTMLAnchorElement>

onPasteCapture?

optional onPasteCapture: ClipboardEventHandler<HTMLAnchorElement>

onPause?

optional onPause: ReactEventHandler<HTMLAnchorElement>

onPauseCapture?

optional onPauseCapture: ReactEventHandler<HTMLAnchorElement>

onPlay?

optional onPlay: ReactEventHandler<HTMLAnchorElement>

onPlayCapture?

optional onPlayCapture: ReactEventHandler<HTMLAnchorElement>

onPlaying?

optional onPlaying: ReactEventHandler<HTMLAnchorElement>

onPlayingCapture?

optional onPlayingCapture: ReactEventHandler<HTMLAnchorElement>

onPointerCancel?

optional onPointerCancel: PointerEventHandler<HTMLAnchorElement>

onPointerCancelCapture?

optional onPointerCancelCapture: PointerEventHandler<HTMLAnchorElement>

onPointerDown?

optional onPointerDown: PointerEventHandler<HTMLAnchorElement>

onPointerDownCapture?

optional onPointerDownCapture: PointerEventHandler<HTMLAnchorElement>

onPointerEnter?

optional onPointerEnter: PointerEventHandler<HTMLAnchorElement>

onPointerLeave?

optional onPointerLeave: PointerEventHandler<HTMLAnchorElement>

onPointerMove?

optional onPointerMove: PointerEventHandler<HTMLAnchorElement>

onPointerMoveCapture?

optional onPointerMoveCapture: PointerEventHandler<HTMLAnchorElement>

onPointerOut?

optional onPointerOut: PointerEventHandler<HTMLAnchorElement>

onPointerOutCapture?

optional onPointerOutCapture: PointerEventHandler<HTMLAnchorElement>

onPointerOver?

optional onPointerOver: PointerEventHandler<HTMLAnchorElement>

onPointerOverCapture?

optional onPointerOverCapture: PointerEventHandler<HTMLAnchorElement>

onPointerUp?

optional onPointerUp: PointerEventHandler<HTMLAnchorElement>

onPointerUpCapture?

optional onPointerUpCapture: PointerEventHandler<HTMLAnchorElement>

onProgress?

optional onProgress: ReactEventHandler<HTMLAnchorElement>

onProgressCapture?

optional onProgressCapture: ReactEventHandler<HTMLAnchorElement>

onRateChange?

optional onRateChange: ReactEventHandler<HTMLAnchorElement>

onRateChangeCapture?

optional onRateChangeCapture: ReactEventHandler<HTMLAnchorElement>

onReset?

optional onReset: FormEventHandler<HTMLAnchorElement>

onResetCapture?

optional onResetCapture: FormEventHandler<HTMLAnchorElement>

onResize?

optional onResize: ReactEventHandler<HTMLAnchorElement>

onResizeCapture?

optional onResizeCapture: ReactEventHandler<HTMLAnchorElement>

onScroll?

optional onScroll: UIEventHandler<HTMLAnchorElement>

onScrollCapture?

optional onScrollCapture: UIEventHandler<HTMLAnchorElement>

onSeeked?

optional onSeeked: ReactEventHandler<HTMLAnchorElement>

onSeekedCapture?

optional onSeekedCapture: ReactEventHandler<HTMLAnchorElement>

onSeeking?

optional onSeeking: ReactEventHandler<HTMLAnchorElement>

onSeekingCapture?

optional onSeekingCapture: ReactEventHandler<HTMLAnchorElement>

onSelect?

optional onSelect: ReactEventHandler<HTMLAnchorElement>

onSelectCapture?

optional onSelectCapture: ReactEventHandler<HTMLAnchorElement>

onStalled?

optional onStalled: ReactEventHandler<HTMLAnchorElement>

onStalledCapture?

optional onStalledCapture: ReactEventHandler<HTMLAnchorElement>

onSubmit?

optional onSubmit: FormEventHandler<HTMLAnchorElement>

onSubmitCapture?

optional onSubmitCapture: FormEventHandler<HTMLAnchorElement>

onSuspend?

optional onSuspend: ReactEventHandler<HTMLAnchorElement>

onSuspendCapture?

optional onSuspendCapture: ReactEventHandler<HTMLAnchorElement>

onTimeUpdate?

optional onTimeUpdate: ReactEventHandler<HTMLAnchorElement>

onTimeUpdateCapture?

optional onTimeUpdateCapture: ReactEventHandler<HTMLAnchorElement>

onTouchCancel?

optional onTouchCancel: TouchEventHandler<HTMLAnchorElement>

onTouchCancelCapture?

optional onTouchCancelCapture: TouchEventHandler<HTMLAnchorElement>

onTouchEnd?

optional onTouchEnd: TouchEventHandler<HTMLAnchorElement>

onTouchEndCapture?

optional onTouchEndCapture: TouchEventHandler<HTMLAnchorElement>

onTouchMove?

optional onTouchMove: TouchEventHandler<HTMLAnchorElement>

onTouchMoveCapture?

optional onTouchMoveCapture: TouchEventHandler<HTMLAnchorElement>

onTouchStart?

optional onTouchStart: TouchEventHandler<HTMLAnchorElement>

onTouchStartCapture?

optional onTouchStartCapture: TouchEventHandler<HTMLAnchorElement>

onTransitionEnd?

optional onTransitionEnd: TransitionEventHandler<HTMLAnchorElement>

onTransitionEndCapture?

optional onTransitionEndCapture: TransitionEventHandler<HTMLAnchorElement>

onVolumeChange?

optional onVolumeChange: ReactEventHandler<HTMLAnchorElement>

onVolumeChangeCapture?

optional onVolumeChangeCapture: ReactEventHandler<HTMLAnchorElement>

onWaiting?

optional onWaiting: ReactEventHandler<HTMLAnchorElement>

onWaitingCapture?

optional onWaitingCapture: ReactEventHandler<HTMLAnchorElement>

onWheel?

optional onWheel: WheelEventHandler<HTMLAnchorElement>

onWheelCapture?

optional onWheelCapture: WheelEventHandler<HTMLAnchorElement>

page

page: number

prefix?

optional prefix: string

property?

optional property: string

radioGroup?

optional radioGroup: string

rel?

optional rel: string

resource?

optional resource: string

results?

optional results: number

rev?

optional rev: string

role?

optional role: AriaRole

security?

optional security: string

slot?

optional slot: string

spellCheck?

optional spellCheck: Booleanish

style?

optional style: CSSProperties

suppressContentEditableWarning?

optional suppressContentEditableWarning: boolean

suppressHydrationWarning?

optional suppressHydrationWarning: boolean

tabIndex?

optional tabIndex: number

title?

optional title: string

translate?

optional translate: "yes" | "no"

typeof?

optional typeof: string

unselectable?

optional unselectable: "off" | "on"

vocab?

optional vocab: string

Pagination

function

Pagination(props): Element

Parameters

• props: Partial<PaginationProps>

Returns

Element

PaginationActions

interface

Methods

first

first(event?): void

To "go" to the first page

Parameters

• event?: MouseEvent

Returns

void

last

last(event?): void

To "go" to the last page

Parameters

• event?: MouseEvent

Returns

void

next(event?): void

To "go" to the next page

Parameters

• event?: MouseEvent

Returns

void

previous(event?): void

To "go" to the previous page

Parameters

• event?: MouseEvent

Returns

void

select

select(page, event?): void

To "go" to a specific page

Parameters

• page: number

The page number to select

• event?: MouseEvent

Returns

void

PaginationApi

interface

PaginationContext

type alias

PaginationContext: WidgetSlotContext<PaginationWidget>

A type for the slot context of the pagination widget

PaginationDirectives

interface

Properties

pageFirst

pageFirst: Directive

A directive to be applied on the first link

pageLast

pageLast: Directive

A directive to be applied on the Last link

pageLink

pageLink: Directive<object>

A directive to be applied to each page link This will handle the click, tabindex and aria attributes

Type declaration

page

page: number

pageNext

pageNext: Directive

A directive to be applied on the next link

pagePrev

pagePrev: Directive

A directive to be applied on the previous link

PaginationNumberContext

type alias

PaginationNumberContext: PaginationContext & object

A type for the slot context of the pagination widget when the slot is the number label

Type declaration

displayedPage

displayedPage: number

Displayed page

PaginationProps

interface

Properties

activeLabel

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'(current)'

ariaEllipsisLabel

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Ellipsis page element'

ariaFirstLabel

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for first page'

ariaLabel

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Page navigation'

ariaLastLabel

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for last page'

ariaLiveLabel

ariaLiveLabel: (currentPage, pageCount) => string

Provide the label for the aria-live element This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Parameters

• currentPage: number

The current page number

• pageCount: number

The total number of pages

Returns

string

Default Value

(currentPage: number, pageCount: number) => `Current page is ${currentPage}`

ariaNextLabel

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for next page'

ariaPageLabel

ariaPageLabel: (processPage, pageCount) => string

Provide the label for each "Page" page button. This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Parameters

• processPage: number

The current page number

• pageCount: number

The total number of pages

Returns

string

Default Value

(processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`

ariaPreviousLabel

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for previous page'

boundaryLinks

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

Default Value

false

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

collectionSize

collectionSize: number

The number of items in your paginated collection.

Note, that this is not the number of pages. Page numbers are calculated dynamically based on collectionSize and pageSize.

Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.

Whatever the collectionSize the page number is of minimum 1.

Default Value

0

directionLinks

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

Default Value

true

disabled

disabled: boolean

If true, pagination links will be disabled.

Default Value

false

ellipsisLabel

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'…'

firstPageLabel

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'«'

lastPageLabel

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'»'

nextPageLabel

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'›'

numberLabel

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

Param

The current page number

Default Value

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

onPageChange

onPageChange: (page) => void

An event fired when the page is changed.

Event payload is the number of the newly selected page.

Page numbers start with 1.

Parameters

• page: number

Returns

void

Default Value

() => {}

page

page: number

The current page.

Page numbers start with 1.

Default Value

1

pageLink

pageLink: (pageNumber) => string

Factory function providing the href for a "Page" page anchor, based on the current page number

Parameters

• pageNumber: number

The index to use in the link

Returns

string

Default Value

(_page: number) => PAGE_LINK_DEFAULT

pageSize

pageSize: number

The number of items per page.

Remarks

min value is 1

Default Value

10

pagesDisplay

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesFactory

pagesFactory: (page, pageCount) => number[]

pagesFactory returns a function computing the array of pages to be displayed as number (-1 are treated as ellipsis). Use Page slot to customize the pages view and not this

Parameters

• page: number

The current page number

• pageCount: number

The total number of pages

Returns

number[]

Default Value

(_page: number, pageCount: number) => {
        const pages: number[] = [];
        for (let i = 1; i <= pageCount; i++) {
            pages.push(i);
        }
        return pages;
    }

previousPageLabel

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'‹'

size

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

Default Value

null

structure

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,

PaginationState

interface

Properties

activeLabel

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'(current)'

ariaEllipsisLabel

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Ellipsis page element'

ariaFirstLabel

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for first page'

ariaLabel

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Page navigation'

ariaLastLabel

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for last page'

ariaLiveLabelText

ariaLiveLabelText: string

The aria-live text

ariaNextLabel

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for next page'

ariaPreviousLabel

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'Action link for previous page'

boundaryLinks

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

Default Value

false

className

className: string

CSS classes to be applied on the widget main container

Default Value

''

directionLinks

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

Default Value

true

directionsHrefs

directionsHrefs: DirectionsHrefs

The hrefs for the direction links

disabled

disabled: boolean

If true, pagination links will be disabled.

Default Value

false

ellipsisLabel

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'…'

firstPageLabel

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'«'

lastPageLabel

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'»'

nextDisabled

nextDisabled: boolean

true if the next link need to be disabled

nextPageLabel

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'›'

numberLabel

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

Param

The current page number

Default Value

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

page

page: number

The current page.

Page numbers start with 1.

Default Value

1

pageCount

pageCount: number

The number of pages.

pages

pages: number[]

The current pages, the number in the Array is the number of the page.

pagesDisplay

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesHrefs

pagesHrefs: string[]

The hrefs for each "Page" page link

pagesLabel

pagesLabel: string[]

The label for each "Page" page link.

previousDisabled

previousDisabled: boolean

true if the previous link need to be disabled

previousPageLabel

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

Default Value

'‹'

size

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

Default Value

null

structure

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,

PaginationWidget

type alias

PaginationWidget: Widget<PaginationProps, PaginationState, PaginationApi, PaginationActions, PaginationDirectives>