components
Page control
v.1.0.0 | SaturnUsage
1
import { PageControl } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the pageControl component by examining all its avalaible props.
Note that the pageControl component's default styling properties can be moderately adjusted through the ctv prop, in case the project do not need a full variant customization. This limited customization ensures a seamless balance between predefined aesthetic and your specific design requirements. Additionally, it's essential to highlight that Kubit always provided the option to full customized all the variants that your project needs.
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Current variant of PageControl |
arrowsControlVariant Required | String | - | Current variant for arrows control |
pages Required | Number | - | Number of the total pages |
currentPosition Required | Number | - | Actual position |
| maxDots | Number | 5 | Maximun number of dots showed |
| leftArrowControl | PageControlArrowControlType | - | Object to manage left arrow |
| rightArrowControl | PageControlArrowControlType | - | Object to manage right arrow |
| dataTestId | String | - | Id for testing |
| ctv | PageControlVariantStylesType | - | Modify styles for the default version of the component |
| extraCt | ArrowsControlVariantStylesType | - | Modify styles for the default version of the component |