<div id="example"></div>
var paginator = new hx.Paginator('#example', {
pageCount: 20,
visibleCount: 10
})
<div id="v2example"></div>
var paginator = new hx.Paginator('#v2example', {
pageCount: 20,
page: 10,
v2Features: {
useAccessibleRendering: true,
}
})
padding
option. aria-label
on the current page to enable screen readers to navigate using the paginator $page
which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX'
would be converted to 'XXX 4 XXX'
hx.userFacingText('paginator', 'currentPageAria')
aria-label
on the numeric page buttons to enable screen readers to navigate using the paginator $page
which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX'
would be converted to 'XXX 4 XXX'
hx.userFacingText('paginator', 'gotoPageAria')
aria-label
on the next page button to enable screen readers to navigate using the paginator $page
which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX'
would be converted to 'XXX 4 XXX'
hx.userFacingText('paginator', 'nextPageAria')
hx.userFacingText('paginator', 'next')
aria-label
on the container to enable screen readers to navigate using the paginator hx.userFacingText('paginator', 'paginatorAria')
aria-label
on the previous page button to enable screen readers to navigate using the paginator $page
which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX'
would be converted to 'XXX 4 XXX'
hx.userFacingText('paginator', 'prevPageAria')
hx.userFacingText('paginator', 'prev')
page
when updating the paginator value. Set to false when wrapping with another component that should control the currently active page. false
value
for consitency with other Hexagon events. This property will be removed in version 2.0.0 padding
option. padding
option.