1.0.2 • Published 2 years ago

@wenmu/pagination v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

描述

这是一个 react 的可自定义样式的分页组件,每项的默认样式、选中样式、以及上一页下一页图标都可以自定义。

安装 install

npm i @wenmu/pagination

效果

效果图

Demo

function Main() {
  const [page, setPage] = useState(1);
  const onChangePage = (val) => {
    setPage(val);
  };
  return (
    <section>
      <Pagination
        current={page}
        total={90}
        itemClass=""
        itemActiveClass={""}
        pre={
          <img src={icon} className="custom-notification-page-icon" alt="" />
        }
        onChange={onChangePage}
      />
      <h3>第{page}页</h3>
    </section>
  );
}

参数

参数类型默认值说明
pageSizenumber10每页显示数量
currentnumber1当前选中的值
showPageCountnumber5设置直接列举页数数量,比如 10,当页数<=10 时,会直接罗列出来
totalnumber0数据的总条数,计算页数使用
preReact.Element默认箭头上一页组件
nextReact.Element默认箭头下一页组件
itemClassstring''每项的默认样式
itemActiveClassstring''选中时的样式
onChangefunctionvoid切换页数事件