alder-ui demos

al-pagination

Lays out the links the app renders: previous, then "Page N of M" from the attributes, then next. A side with nowhere to go is a <span aria-disabled="true">. Children without a slot go in the middle and replace the generated text.

First page

Previous Next

A middle page

Previous Next

Last page

Previous Next

Your own middle text (the default slot)

Previous Showing 11 to 20 of 48 Next

Page links (the default slot)

Unslotted links are square buttons; aria-current="page" outlines the current one.

Previous 1 2 3 Next