下一个修补
最好的东西 下一个.js
TL; DR 数据 给我看看 德莫尔
为什么要使用这个帕吉尼通模块?
- 无障碍. 语义 HTML 并完全标出适当的 aria 角色来辅助浏览.
- 可使用 . 基础 CSS 样式用于键盘聚焦状态和脂肪指触目标.
- 相应相. 所有设备都有用.
- 有主题的. 随你怎么说.
- 自我约束. 出发只需要一个道具 其余的逻辑都是为你处理的.
- 与下个. 与 Next.js 路由器集成.
安装
npm install --save @etchteam/next-pagination
使用量
这部分是相当自我控制的。 你需要通过 潜在成果总数 以计算要显示的页数.
import React, { Component } from 'react'
import Pagination from '@etchteam/next-pagination'
class Example extends Component {
render() {
return <Pagination total={1000} />
}
}
您需要导入 CSS, 无论是在您的 _app.js或者在你的萨斯大楼里.
import '@etchteam/next-pagination/dist/index.css'
使用时,pagination组件会用添加的pagination查询参数来重新装入相同的路由.
page的页码.size每页结果数.
例如:page=4和大小=20
这个 默认页面 为 1 默认大小 20岁.
你需要自己从API中装入实际数据. 我们只为前端而来!
道具
| 名称 | 类型 | 说明 |
|---|---|---|
total | Number | 要求. 页面总数. |
theme | Object | CSS 模块样式对象 . |
sizes | Array | 页面大小数组 |
perPageText | String | 页面大小下拉的标签 |
setPageSizeText | String | 隐形页面大小按钮的标签 |
linkProps | Object | 额外道具传递给下一个. js 链接 |
他们
下一个.js 本地支持 CSS 模块,因此此组件支持注入 CSS 模块样式.
导入正常组件的样式, 但通过它们作为道具 .
[...]
import styles from '/my/path/to/styles.module.css'
class Example extends Component {
render() {
return <Pagination total={1000} theme={styles} />
}
}
主题使用 BEM 类与基类命名 next-pagination。文件 /src/index.module.scss 应该给你一个可靠的 需要什么.
贡献
此软件包创建于 创建-反应-图书馆。 。 。 .
设置
要装好你就得跑 npm install && cd example && npm install
发展
在根文件夹中,运行 npm run start
同时,在示例文件夹中,运行 npm run dev
然后去那边 localhost:3000 以看到实例运行.
部署实例
在根文件夹中运行 npm run deploy 将示例用于在 gh-pages 钱的分枝.
发布到 npm
自信吗? 运行 npm publish 发送最新版本到 npm.
许可证
麻省理工学院 团队