@anderpang/pager

Pager

Install

npm install @anderpang/pager

Constructor

export interface IPagerOptions {
    el: HTMLElement;
    maxPage: number;
    current?: number;
    size?: number;
    firstTrigger?: boolean;
    change?: (page: number) => void;
}

declare class Pager {
    constructor(options: IPagerOptions);
    go(page: number): void;
    setMaxPage(maxPage: number): void;
    update(): void;
}
export default Pager;

Usage

import

  import Pager from "@anderpang/pager";
  import "@anderpang/pager/Pager.css";

or

<link rel="stylesheet" href="@anderpang/pager/Pager.css" />
<script src="@anderpang/pager/dist/Pager.js"></script>

Example

  import Pager from "@anderpang/pager";
  import "@anderpang/pager/Pager.css";

   var pager=new Pager({
        el:document.querySelector(".pager")!,
        maxPage:300,
        // size:7,
        change(page:number){
            console.log("current page:",page)
        }
    });

Change Theme

 <style>
    .pager{
        color:#FFF;
        --text-invert:gold;
        --border-color:red;
        --bg-color:green;        
        --bg-hover-color:blue;
    }
 </style>