CutestUI 分页组件

概述

CutestUI 分页组件是一个完全基于 CSS 实现的分页导航解决方案，无需 JavaScript。它提供了丰富的样式变体和交互效果，能够满足各种网站的分页需求。组件设计简洁美观，响应式适配各种屏幕尺寸，同时支持多种状态和自定义样式。

基本使用方法

分页组件的基本结构非常简单，通过组合几个核心类来创建功能完整的分页导航。

基本结构由以下几个部分组成：

• .pagination - 作为分页容器的无序列表
• .pagination-item - 单个分页项
• .pagination-link - 分页链接
• .pagination-prev - 上一页按钮（可选）
• .pagination-next - 下一页按钮（可选）
• .pagination-ellipsis - 省略号（可选）

样式变体

CutestUI 分页组件提供了多种样式变体，可以通过添加相应的类来应用不同的视觉效果。

圆角样式

药丸形状

方形样式

带背景色的分页

透明背景的分页

深色主题分页

浅色主题分页

尺寸变体

分页组件提供了不同尺寸的变体，适应不同的布局需求。

状态类

分页组件支持多种状态类，用于表示当前页面、禁用状态等。

激活状态

使用 .-active 类来标记当前活动的页码：

禁用状态

使用 .-disabled 类来禁用特定的分页项：

响应式设计

CutestUI 分页组件具有响应式设计，能够自动适应不同的屏幕尺寸。在移动设备上，分页组件会自动调整布局，隐藏部分页码，以确保良好的用户体验。

组合样式

分页组件的各种样式变体可以组合使用，创建更加个性化的视觉效果。

类名参考

以下是 CutestUI 分页组件的所有可用类名及其描述：

使用指南

安装

将 pagings.css 文件引入到您的 HTML 页面中：

基本步骤

1. 创建一个 <nav> 元素作为分页的容器
2. 在 <nav> 内部添加一个无序列表 <ul> 并应用 .pagination 类
3. 为每个分页项创建一个 <li> 元素并应用 .pagination-item 类
4. 在每个 <li> 元素内部添加 <a> 标签并应用 .pagination-link 类
5. 根据需要添加特殊类，如上一页 (.pagination-prev)、下一页 (.pagination-next) 和省略号 (.pagination-ellipsis)
6. 应用所需的样式变体和状态类

最佳实践

• 始终为当前页面添加 .-active 类
• 当到达第一页或最后一页时，为上一页或下一页按钮添加 .-disabled 类
• 使用省略号表示中间有更多页码
• 根据您的网站设计选择合适的样式变体
• 确保分页在各种设备上都能良好显示