module@warp-drive/experiments/pagination @experimental
Interface RealPaginationLink sincev5.9.0
ts
interface RealPaginationLink {
readonly distanceFromActiveIndex: number;
readonly index: number;
readonly isCurrent: boolean;
readonly isReal: true;
setActive: () => Promise<unknown>;
readonly url: string;
get text(): string;
}Hideconstructor
A single numbered link, e.g. page 3. Loads its page and makes it active when setActive runs. Carries its index and its distanceFromActiveIndex so a UI can style links by how far they sit from the current page.
gts
<EachLink @pages={{pages}} as |state|>
{{#each state.links as |link|}}
{{#if link.isReal}}
<button class={{if link.isCurrent "active"}} {{on "click" link.setActive}}>
{{link.text}}
</button>
{{/if}}
{{/each}}
</EachLink>Properties
distanceFromActiveIndex
ts
readonly distanceFromActiveIndex: number;index
ts
readonly index: number;isCurrent
ts
readonly isCurrent: boolean;isReal
ts
readonly isReal: true;setActive
ts
setActive: () => Promise<unknown>;Loads this link's page and makes it the active page on the associated PaginationState. It is a stable reference, so it is safe to pass around as an "action" or "event" handler:
gts
<button {{on "click" link.setActive}}>{{link.text}}</button>Returns
Promise<unknown>
url
ts
readonly url: string;text
Get Signature
ts
get text(): string;Returns
string