Stepper

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

Author

• @author Vigneshwaran [email protected]

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

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. |