@licuido-ui/ui_pagination NPM

Stepper

The Pagination component enables the user to select a specific page from a range of pages.

Author

@author Vigneshwaran vigneshwaran@crayond.co

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_pagination

Import component

import { Pagination } from '@licuido-ui/ui_pagination';

Usage

<Pagination count={} variant='' />

Image

alt text

Sample Code

<Pagination 
   count={5}
   variant=''
   shape=''
   disabled={false}
   size=''
   startIcon={<LeftArrow />}
   endIcon={<RightArrow />}
   value={05}
   totalCount={[]}
   handleChange={handleChange}
   perPage='' />

Props

Prop	Type	Description
`className`	`string`	Override class name for additional styling.
`sx`	`SxProps<Theme>`	System overrides and additional CSS styles.
`formControlStyle`	`SxProps`	Styles applied to the form control component.
`paginationBoxStyle`	`SxProps`	Styles applied to the form control box component.
`paginationButtonStyle`	`SxProps`	Styles applied to the pagination button component.
`count`	`number`	The count applied to pagination.
`variant`	`'text' or 'outlined'`	The variant applied to pagination.
`shape`	`'rounded' or 'circular'`	The shape applied to pagination.
`size`	`'small' or 'large' or 'medium'`	The size applied to pagination.
`disabled`	`boolean`	Used to disable the previous and next button.
`startIcon`	`React.ReactNode`	Change the previous icon.
`endIcon`	`React.ReactNode`	Change the next icon.
`selectIcon`	`React.ReactNode`	Change the select component icon.
`perPage`	`number or string`	Define the per page value.
`totalCount`	`string[]`	Define the total count for the pages.
`handleChange`	`(event: SelectChangeEvent<string>) => void`	onChange callback function for select component.
`handleChangePage`	`(event: React.ChangeEvent<unknown>, page: number) => void`	onClick callback function for pagination buttons.
`value`	`string`	State of the selected value in pagination.
`paginationBottomTextRootStyle`	`SxProps`	Styles applied to the pagination button component.
`showPaginationBottomCountTextStyle`	`SxProps`	Styles applied to the pagination button component.
`showPaginationBottomCountText`	`SxProps`	Styles applied to the pagination button component.
`siblingCount`	`number`	count applied to the pagination intervels component.
`boundaryCount`	`number`	count applied to the pagination intervels component.
`disableVisibleTotalCountSelectMenu`	`boolean`	prop applied to the pagination select total count memnu visible disable.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

5.1.0

8 months ago