Pagination
Allow users to navigate between multiple pages of data
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">1</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#" is-active="true">2</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">3</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">10</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">11</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Usage
Build the pager from <sa-pagination-item>s inside <sa-pagination-content>, using the first, previous, link, ellipsis, next and last tags for each item.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link href="#">1</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Examples
URL
The URL of <sa-pagination-link>, <sa-pagination-first>, <sa-pagination-previous>, <sa-pagination-next>, and <sa-pagination-last> can be specified a couple of ways:
- You can use the
hrefproperty to specify any valid URL as per thehrefproperty of the anchor element. - You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as
asp-controller,asp-action,asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-previous
asp-controller="Booking"
asp-action="List"
asp-route-page="1"/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="1">
1
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="2"
is-active="true">
2
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="3">
3
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis/>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="10">
10
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-link asp-controller="Booking"
asp-action="List"
asp-route-page="11">
11
</sa-pagination-link>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next asp-controller="Booking"
asp-action="List"
asp-route-page="3"/>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Custom content
You can change the default content of the first, previous, next, last, and ellipsis buttons.
<sa-pagination>
<sa-pagination-content>
<sa-pagination-item>
<sa-pagination-first href="#">
<sa-icon name="arrow-left-to-line"/>
First
</sa-pagination-first>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-previous href="#">
<sa-icon name="arrow-left"/>
Earlier departures
</sa-pagination-previous>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-ellipsis>
<sa-icon name="rectangle-ellipsis" stroke-width="1"/>
</sa-pagination-ellipsis>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-next href="#">
Later departures
<sa-icon name="arrow-right"/>
</sa-pagination-next>
</sa-pagination-item>
<sa-pagination-item>
<sa-pagination-last href="#">
Last
<sa-icon name="arrow-right-to-line"/>
</sa-pagination-last>
</sa-pagination-item>
</sa-pagination-content>
</sa-pagination>Accessibility
<sa-pagination> renders a <nav> landmark labelled "pagination". Set is-active on the link for the current page so it renders aria-current="page". The First, Previous, Next and Last links render a text label next to their icon. On small screens the label is visually hidden but still announced. <sa-pagination-ellipsis> is decorative and hidden from assistive technology.
If you replace the content of the First, Previous, Next or Last links, keep a text label. When the replacement is only an icon, add the text in a <span class="sr-only">.
API Reference
<sa-pagination>
Renders a <nav> element with role="navigation" and aria-label="pagination" .
<sa-pagination-content>
Renders a <ul> element containing the pagination items.
<sa-pagination-item>
Renders an <li> element wrapping a single link.
<sa-pagination-first>
Renders an <a> element styled as a ghost button. When empty, it renders a chevron icon and "First" text by default. It accepts the same routing attributes as <sa-pagination-link>.
Prop
Type
<sa-pagination-previous>
Renders an <a> element styled as a ghost button. When empty, it renders a chevron icon and "Previous" text by default. It accepts the same routing attributes as <sa-pagination-link>.
Prop
Type
<sa-pagination-link>
Renders an <a> element styled as a button.
Prop
Type
Routing attributes
The pagination links also accept the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both. These attributes are accepted by <sa-pagination-link>, <sa-pagination-first>, <sa-pagination-previous>, <sa-pagination-next>, and <sa-pagination-last>.
Prop
Type
<sa-pagination-ellipsis>
Renders a <span> element with aria-hidden="true". When empty, it renders an ellipsis icon with screen-reader-only "More pages" text by default.
<sa-pagination-next>
Renders an <a> element styled as a ghost button. When empty, it renders "Next" text and a chevron icon by default. It accepts the same routing attributes as <sa-pagination-link>.
Prop
Type
<sa-pagination-last>
Renders an <a> element styled as a ghost button. When empty, it renders "Last" text and a chevron icon by default. It accepts the same routing attributes as <sa-pagination-link>.
Prop
Type