Progress bar
A progress bar displays the status of a given process.
Default Pagination
Default Pagination with bordered buttons.
1
2
3
4
5
6
7
8
9
import React from 'react';
import Pagination from '@neoKit/Pagination-bar';
const PaginationDefaultExample = () => {
return <Pagination pageCount={400}></Pagination>
};
export default PaginationDefaultExample;Pagination with event
pagination with selected pages
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useState } from "react";
import Pagination from '@neoKit/Pagination-bar';
import HelperMessage from "@neoKit/helper-message";
const PaginationWithEvent = () => {
const [pageNumber, setPageNumber] = useState(1);
return (
<div>
<Pagination
pageCount={400}
onPageChange={(e) => setPageNumber(++e.selected)}
></Pagination>
<HelperMessage>
<p className=" py-2 text-base font-medium ">
The current Page is: {pageNumber}{" "}
</p>
</HelperMessage>
</div>
) };
export default PaginationWithEvent;Pagination with previos and next text
pagination with previous and next text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React from 'react';
import Pagination from '@neoKit/Pagination-bar';
const PaginationWithText = () => {
return (
<div>
<Pagination
pageCount={400}
onPageChange={(e) => {}}
previousLabel={"Previous"}
nextLabel={"Next"}
></Pagination>
</div>
) };
export default PaginationWithText;