Skip to main content

Pagination

Function Pagination 

Source
pub fn Pagination(_: PaginationProps) -> Element
Expand description

分页导航组件。

统一了后台与前台的分页 UI,通过 variant 切换配色与展示细节:

  • "admin":描边胶囊按钮(与 BTN_OUTLINE 同族),显示页码计数 ({当前} / {总} 页 (共 {total} {unit})),首尾页渲染禁用态。
  • "frontend":主题绿胶囊按钮,不显示计数,首尾页直接不渲染按钮。

Props:

  • variant"admin""frontend"
  • current_page:当前页码(从 1 开始)
  • total:数据总条数
  • per_page:每页条数,用于计算总页数
  • prev_route:点击上一页跳转的目标路由(路由式翻页用)
  • next_route:点击下一页跳转的目标路由(路由式翻页用)
  • unit:计数单位(“篇” / “条”),仅 admin 显示计数时使用
  • on_prev / on_next:可选回调。传入时渲染 <button onclick> 走客户端 signal 翻页(与路由式 prev_route/next_route 互斥,回调优先);不传则保持 原路由式 <Link>。后台单路由 tab(如「管理文章」列表)用回调翻页, 前台/其他分页页面仍走路由,零影响。
  • on_jump:可选跳页回调。传入且总页数 > 1 时,admin 变体的当前页码渲染为 可编辑输入框——聚焦编辑、回车跳转(自动夹取到 [1, total_pages],非法输入 还原为当前页)、失焦回显。仅回调式翻页可用——路由式翻页无法由任意页码反推 Route,故路由式调用方不传此 prop,页码保持纯文本。

§Props

For details, see the props struct definition.