A draggable carousel with controls and keyboard navigation.
import { Carousel } from '@vrum/ui';
import { CarouselItem, Card, CardHeader, CardContent } from '@vrum/ui';
<Carousel
orientation={"horizontal"}
opts={{"loop":false}}
showControls={true}
label={"Project milestones"}
>
<CarouselItem><Card><CardHeader>Discovery</CardHeader><CardContent>Align on the project goals.</CardContent></Card></CarouselItem><CarouselItem><Card><CardHeader>Design</CardHeader><CardContent>Explore and validate the direction.</CardContent></Card></CarouselItem><CarouselItem><Card><CardHeader>Delivery</CardHeader><CardContent>Build, review, and release.</CardContent></Card></CarouselItem>
</Carousel>| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction. |
opts | Partial<OptionsType> | none | opts configuration. |
showControls | boolean | true | show controls configuration. |
label | string | "Carousel" | Visible or accessible label. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |
| Prop | Type | Default | Description |
|---|---|---|---|
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDivElement> | none | on select configuration. |