SusPagination

Полоса страниц для длинных списков — текущая страница, видимое окно, опционально first/last.

Пакет

SusKit · Атомы (коммерческий)

Открыть в песочнице

SusKit · Atoms

Свойства

Имя	Тип	По умолчанию
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

Слоты

Слотов нет.

События

Имя	Поле	Payload
PageChanged	OnPageChanged	int

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

• 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

Использование

<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 = "counter" заменяет ряд номеров страниц компактной меткой «‹ 2 / 5 ›» между кнопками «назад» и «вперёд». Используйте его в шапке списка или рядом с таблицей, где ряд номеров страниц не помещается.

<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	По умолчанию	Роль
Variant	"pages"	pages — окно пронумерованных страниц (поведение не меняется) · counter — метка «N / M». Любое другое значение откатывается к pages с предупреждением.
CounterFormat	"{0} / {1}"	Текст счётчика, форматируется с {0} = текущая страница и {1} = число страниц. Некорректная строка формата откатывается к значению по умолчанию с предупреждением.

• Кнопка «назад» отключена на первой странице, кнопка «вперёд» — на последней; если страница одна, отключены обе. Вариант pages их никогда не отключает (он только ограничивает номер страницы допустимым диапазоном).
• Хуки стиля: sus-pagination--counter на корне, sus-pagination__counter на метке и sus-pagination--single на корне, когда страница одна или их нет совсем (kit приглушает счётчик серым). Вид отключённых prev/next берётся из собственного disabled-состояния SusButton.

Хуки скина для типовых переопределений

Если ваш скин раньше собирал собственный пейджер, используйте вместо него вариант counter:

Самодельный обход	Встроенный хук
Самодельный пейджер «‹ N / M ›» со своими кнопками навигации, модификатором disabled и меткой счётчика	Variant = "counter": sus-pagination__prev / sus-pagination__next (disabled через SusButton), sus-pagination__counter, sus-pagination--single

Заметки

• Length — общее количество страниц; Model — активная страница (нумерация с 1).
• Density: compact · default · comfortable.
• TotalVisible влияет только на вариант pages.