SusPagination

Page strip for long lists — current page, visible window, optional first/last.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Length	Prop<int>	1	v-model
Model	Prop<int>	1	v-model
TotalVisible	Prop<int>	5	v-model
ShowFirstLast	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Circle	Prop<bool>	false	v-model
Density	Prop<string>	"default"	v-model
Variant	Prop<string>	"pages"	v-model
CounterFormat	Prop<string>	"{0} / {1}"	v-model

Slots

No slots.

Events

Name	Field	Payload
PageChanged	OnPageChanged	int

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• keyboard-focus
• sus-hidden
• sus-pagination
• sus-pagination__btn
• sus-pagination__counter
• sus-pagination__page
• sus-pagination__page--active
• sus-pagination__pages
• sus-pagination--circle
• sus-pagination--counter
• sus-pagination--density-comfortable
• sus-pagination--density-compact
• sus-pagination--disabled
• sus-pagination--single

Usage

<template>
  <sus:SusPagination :Length="PageCount.Value"
                     :Model="Page.Value"
                     TotalVisible="5"
                     ShowFirstLast="true"
                     @page-changed="OnPage" />
</template>

<script>
public Prop<int> PageCount = new(12);
public Prop<int> Page = new(1);
void OnPage(int page) { Page.Value = page; }
</script>

var pages = new SusPagination();
pages.Length.Value = 20;
pages.Model.Value = 1;
pages.TotalVisible.Value = 5;
pages.Circle.Value = true;
pages.OnPageChanged += page => { /* … */ };

Counter variant

Variant = "counter" swaps the row of page numbers for a compact "‹ 2 / 5 ›" label between the prev and next buttons. Use it in a list header or next to a table, where a row of page numbers does not fit.

<sus:SusPagination Variant="counter"
                   :Length="PageCount.Value"
                   :Model="Page.Value"
                   @page-changed="OnPage" />

var pager = new SusPagination();
pager.Variant.Value = "counter";
pager.Length.Value = 5;
pager.Model.Value = 2;
pager.CounterFormat.Value = "Page {0} of {1}";

Prop	Default	Role
Variant	"pages"	pages — numbered page window (unchanged behavior) · counter — "N / M" label. Any other value falls back to pages with a warning.
CounterFormat	"{0} / {1}"	Counter text, formatted with {0} = current page and {1} = page count. An invalid format string falls back to the default with a warning.

• The previous button is disabled on the first page and the next button on the last page; both are disabled when there is only one page. The pages variant never disables them (it only clamps the page).
• Style hooks: sus-pagination--counter on the root, sus-pagination__counter on the label, and sus-pagination--single on the root when there is one page or none (the kit greys the counter out). The disabled look of prev/next comes from SusButton's own disabled state.

Skin hooks for common overrides

If your skin used to build its own pager, use the counter variant instead:

Custom workaround	Built-in hook
A hand-made "‹ N / M ›" pager with its own nav buttons, disabled modifier and counter label	Variant = "counter": sus-pagination__prev / sus-pagination__next (disabled through SusButton), sus-pagination__counter, sus-pagination--single

Notes

• Length is the total number of pages; Model is the active 1-based page.
• Density: compact · default · comfortable.
• TotalVisible affects only the pages variant.