Install

npm install @zym-com/paging

or

yarn add @zym-com/paging

Basic Usage

import Paging from "@zym-com/paging";
import "@zym-com/paging/dist/style.css";

function App() {
const options ={
    "configuration": {
        "pageDafualtCurrent": 1,
        "pageDafualtSize": 10,
        "pageboxMinWidth": 28,
        "pageboxHeight": 28,
        "pageboxBgColorSelect": "solidBgColor",
        "pageboxBgColor": "rgba(255, 255, 255,0)",
        "pageboxAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "pageboxImage": "",
        "pageboxTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "pageboxRadius": 5,
        "pageboxMargin": {
            "l": 0,
            "r": 5
        },
        "pageboxPadding": {
            "l": 0,
            "r": 0
        },
        "pageboxBorderStyle": "solid",
        "pageboxBorderWidth": 1,
        "pageboxBorderColor": "rgba(255, 255, 255,1)",
        "ellipsisBgFollow": false,
        "pageboxCheckedBgColorSelect": "solidBgColor",
        "pageboxCheckedBgColor": "rgba(255, 255, 255,0)",
        "pageboxCheckedAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "pageboxCheckedImage": "",
        "pageboxCheckedTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(24,144,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 0,
            "fontStyle": "normal"
        },
        "pageboxCheckedBorderStyle": "solid",
        "pageboxCheckedBorderWidth": 1,
        "pageboxCheckedBorderColor": "rgba(24,144,255,1)",
        "preNextWH": {
            "w": 28,
            "h": 28
        },
        "preNextType": "text",
        "preNextRadius": 5,
        "preNextMargin": {
            "l": 0,
            "r": 5
        },
        "preNextBorderStyle": "solid",
        "preNextBorderWidth": 1,
        "preNextBorderColor": "rgba(255, 255, 255,1)",
        "pagePreImage": "",
        "pageNextImage": "",
        "preNextBgColorSelect": "solidBgColor",
        "preNextBgColor": "rgba(255, 255, 255,0)",
        "preNextAnamorphism": {
            "startVal": "rgba(255,68,68,1)",
            "endVal": "rgba(0,0,0,1)",
            "direction": 180
        },
        "preNextImage": "",
        "preText": "<",
        "nextText": ">",
        "preNextTextStyle": {
            "fontFamily": "Microsoft Yahei",
            "fontSize": 16,
            "color": "rgba(255,255,255,1)",
            "fontWeight": "normal",
            "letterSpacing": 0,
            "lineHeight": 23,
            "fontStyle": "normal"
        }
    },
    "base": {
        "width": 350,
        "height": 80
    },
    "dataSource": [
        {
            "total": 100,
            "pageNum": 1,
            "pageSize": 10
        }
    ],
   bindCallbackParams:(evenName: string, data: Record<string, any>) => void;
}

 return (
    <>
      <Paging {...options} />
    </>
  );
}