分页导航`Pagination`

为前后台列表提供一致的上一页、下一页与页码信息，支持路由和回调两种方式。

亲手试一试。

01 / LIVE PREVIEW

STATES / 示例状态

前台后台跳页

在左侧预览中体验这枚组件。

INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

let mut page = use_signal(|| 1i32);
rsx! {
    Pagination::<Route> {
        variant: "admin",
        current_page: page(),
        total: 80,
        per_page: 10,
        unit: "篇",
        on_prev: move |_| page.set((page() - 1).max(1)),
        on_next: move |_| page.set((page() + 1).min(8)),
    }
}

主要属性

03 / PROPERTIES

属性 / 类型	默认值	说明
`current_page`i32	必填	当前页码，从 1 开始。
`total`i64	必填	全部记录数。
`per_page`i32	必填	每页记录数，必须大于 0。
`variant`&'static str	必填	admin 或 frontend。
`unit`&'static str	必填	数量单位，例如篇。
`on_jump`Option<EventHandler<i32>>	None	后台回调分页的跳页处理。

操作方式

04 / INTERACTION

Tab选择翻页操作Enter翻页或提交页码

YGGDRASIL · 每一个细节，都有回应。src/components/ui.rs