SusPagination

长列表的分页条 —— 当前页、可见窗口，可选首页/末页。

包

SusKit · 原子（商业）

在 Playground 中打开

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

插槽

没有插槽。

事件

名称	字段	载荷
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 => { /* … */ };

计数器变体

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 会将计数器置灰）。上一页/下一页的禁用外观来自 SusButton 自身的禁用状态。

常见覆盖的皮肤钩子

如果你的皮肤过去自己构建分页器，请改用计数器变体：

自定义变通做法	内置钩子
手工制作的“‹ N / M ›”分页器，带自己的导航按钮、禁用修饰符和计数器标签	Variant = "counter"：sus-pagination__prev / sus-pagination__next（通过 SusButton 禁用）、sus-pagination__counter、sus-pagination--single

备注

• Length 是总页数；Model 是当前激活页（从 1 开始）。
• Density：compact · default · comfortable。
• TotalVisible 只影响 pages 变体。