components
Carousel
v.1.0.0 | SaturnUsage
1
import { Carousel } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the carousel component by examining all its avalaible props.
Carousel UnControlled
| Property | Description | Type | Default |
|---|---|---|---|
variant Required | Variant | String | - |
elements Required | Slides to show | JSX.Element | - |
| pageControlVariant | Pagination variant | String | - |
| pageControlArrowsControlVariant | Pagination arrows control variant | String | - |
| defaultPage | Default open page | Number | 0 |
| numElementsPerPage | Number of elements per page | Number | - |
| numElementsToSlide | Number of elements to slide | Number | - |
| onePageAlign | When items fill in one page, align of the container | CarouselAlignType | CENTER |
| onPageChange | Function called when page changes | (page: Number) => void | - |
| circular | When circular, after last page it will return to the first | Boolean | true |
| centerMode | When center mode, and elements.length is odd, highlight the center elemenent of the carusel | Boolean | false |
| extraPadding | Add extra padding (px) to the container to view beyond the limits of the carousel view | Number | - |
| extraPaddingAsArrow | Allow extra padding to behave like an arrow. It should be used in mobile | Boolean | true |
| leftArrow | Left arrow icon | IElementOrIcon | - |
| rightArrow | Right arrow icon | IElementOrIcon | - |
| hasPagination | Show or not the pagination component | Boolean | true |
| onTransition | Informs when the component is on transition | function | - |
| dataTestId | Test id | String | - |
| displayArrowsOnCarousel | Show the arrows on the carousel or on the Page Control | Boolean | true |
| disableSwipe | Disable or not the swipe action | Boolean | false |
| pageControlAutomateConfig | Configuration for PageControlAutomate | PageControlAutomateConfigType | - |
| centerExtremesWhenExtraPadding | Extremes will be centered if extraPadding is used | Boolean | - |
| ctv | Modify styles for the default version of the component | CarouselPropsStylesType | - |
Carousel Controlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant |
elements Required | JSX.Element | - | Slides to show |
pageControlVariant Required | String | - | Pagination variant |
pageControlArrowsControlVariant Required | String | - | Pagination arrows control variant |
numPages Required | Number | - | Number of pages |
onKeyDown Required | KeyboardEventHandler | - | onKeyDown callback |
| defaultPage | Number | 0 | Default open page |
| numElementsPerPage | Number | - | Number of elements per page |
| numElementsToSlide | Number | - | Number of elements to slide |
| onePageAlign | CarouselAlignType | CENTER | When items fill in one page, align of the container |
| onPageChange | (page: Number) => void | - | Function called when page changes |
| circular | Boolean | true | When circular, after last page it will return to the first |
| centerMode | Boolean | false | When center mode, and elements.length is odd, highlight the center elemenent of the carusel |
| extraPadding | Number | - | Add extra padding (px) to the container to view beyond the limits of the carousel view |
| extraPaddingAsArrow | Boolean | true | Allow extra padding to behave like an arrow. It should be used in mobile |
| leftArrow | IElementOrIcon | - | Left arrow icon |
| rightArrow | IElementOrIcon | - | Right arrow icon |
| hasPagination | Boolean | true | Show or not the pagination component |
| onTransition | function | - | Informs when the component is on transition |
| dataTestId | String | - | Test id |
| displayArrowsOnCarousel | Boolean | true | Show the arrows on the carousel or on the Page Control |
| disableSwipe | Boolean | false | Disable or not the swipe action |
| pageControlAutomateConfig | PageControlAutomateConfigType | - | Configuration for PageControlAutomate |
| centerExtremesWhenExtraPadding | Boolean | - | Extremes will be centered if extraPadding is used |
| ctv | CarouselPropsStylesType | - | Modify styles for the default version of the component |
| currentPage | Number | - | Current page |
| onMediaButtonClick | (playing: Boolean, event?: React.MouseEvent ) => void | - | Function called when media button is clicked |
| onIndicatorChange | (indexIndicator: Number) => void | - | Function to handle when indicator changes when using PageControlAutomate |
| onMouseOut | MouseEventHandler | - | Function called when mouse is out |
| onMouseOver | MouseEventHandler | - | Function called when mouse is over |
| playing | Boolean | true | Boolean to control PageControlAutomate |
| onLeftArrowClick | MouseEventHandler | - | left arrow onClick callback |
| onRightArrowClick | MouseEventHandler | - | right arrow onClick callback |