倾斜
Pagination 组件提供页面导航,可选项目每页选择和项目计数信息.
图片参考
使用时间
import { Pagination } from '@dt-dds/react';
const Example = () => {
const [currentPage, setCurrentPage] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
return (
<Pagination
currentPage={currentPage}
totalPages={20}
totalItems={200}
itemsPerPage={itemsPerPage}
onPageChange={setCurrentPage}
onItemsPerPageChange={setItemsPerPage}
showItemsPerPage
showItemsInfo
/>
);
};
属性
| 财产 | 类型 | 默认 | 说明 |
|---|---|---|---|
currentPage | number | —— 说 | 当前选中的页面( 基于 1 个索引) |
totalPages | number | —— 说 | 可用页数共计 |
totalItems | number | —— 说 | 所有页面的项目总数 |
itemsPerPage | number | 10 | 每页显示的项目数 |
onPageChange | (page: number) => void | —— 说 | 当当前页面更改时, 调用已启动 |
onItemsPerPageChange | (items: number) => void | —— 说 | 当每页项目值变化时调用已开火 |
showItemsPerPage | boolean | false | 控制每页选择器的能见度 |
showItemsInfo | boolean | true | 控制项目信息文本的能见度 |
itemsPerPageOptions | number[] | [10, 20, 50, 100] | 每页项目的现有选项 |
dataTestId | string | pagination | 自定义页形根元素的测试标识符 |
堆栈
- 类型脚本 用于静态类型检查
- 反应 — JavaScript 用户界面库
- 情感 用于使用 JavaScript 写入 Css 样式
- 故事书 ——由Vite供电的UI组件环境
- 欢乐 - JavaScript 测试框架
- 反应测试库 - 以用户为中心测试用户界面组件
- ESLint 语录 代码林入
- 高级 用于代码格式
- 苏普 - 由Esbuild供电的脚本捆绑机
- 雅伦 从管理软件包
图标
yarn build- 制作软件包yarn dev- 在当地运行软件包yarn lint- 将所有文件输入此软件包yarn test- 测试所有单位yarn test:report- 打开测试覆盖报告yarn test:update:snapshot- 进行所有单元测试并更新快照
汇编
运行 yarn build 从软件包的根部 齐声 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .
这个 /dist 文件夹包含编译输出.
pagination
└── dist
├── index.d.ts <-- Types
├── index.js <-- CommonJS version
└── index.mjs <-- ES Modules version
...
版本
跟着 语义版本
许可证
许可证根据 MIT 许可证