@wix/design-system
Version:
@wix/design-system
103 lines • 4.78 kB
TypeScript
import React from 'react';
export type ControlSize = 'tiny' | 'small' | 'medium' | 'large';
export type CarouselControlsPosition = 'sides' | 'overlay' | 'bottom' | 'none';
export type CarouselImage = Partial<HTMLImageElement> & {
src: string;
};
export interface CarouselProps {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook?: string;
/** Specifies a CSS class name to be appended to the component's root element.
* @internal
*/
className?: string;
/** Defines an array of objects where each contains the `src` of an image (in `<img src="your_src" />`). */
images?: CarouselImage[];
/** Sets the image's position. */
imagesPosition?: React.CSSProperties['objectPosition'];
/** Sets the image's fit. */
imagesFit?: React.CSSProperties['objectFit'];
/** Accepts any component as a child item. Most commonly used to display `<Card/>`, `<Image/>` or video files. */
children?: React.ReactNode;
/** Sets the skin of the control (next / previous) buttons. */
buttonSkin?: 'standard' | 'inverted' | 'light' | 'transparent' | 'premium';
/** Drops a shadow below the control buttons. */
showControlsShadow?: boolean;
/** Loops images endlessly. */
infinite?: boolean;
/** Auto-plays images. */
autoplay?: boolean;
/** Controls if the bottom dots are visible or hidden. */
dots?: boolean;
/** Shows one slide at a time (default) or stacks one slide after another horizontally. */
variableWidth?: boolean;
/** Sets the slide to start a presentation with. */
initialSlideIndex?: number;
/** Index change callback. `index => ...` */
afterChange?: (currentSlide: number) => void;
/** Index change callback. `(oldIndex, newIndex) => ...` */
beforeChange?: (currentSlide: number, nextSlide: number) => void;
/** Sets the control buttons' position. */
controlsPosition?: CarouselControlsPosition;
/** Sets the control buttons' size. */
controlsSize?: ControlSize;
/** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow. */
controlsStartEnd?: 'disabled' | 'hidden';
/** Controls gradient color when controlsPosition set to overlay.
* @default white
*/
gradientColor?: string;
/** Enables gradient on when controlsPosition set to overlay.
* @default false
*/
gradient?: boolean;
/** Number of pixels dividing between slides. */
slideSpacing?: number;
/** Animation duration in milliseconds. */
animationDuration?: number;
/** Defines how slides align relative to the viewport.
* When set, this takes full control of slide positioning and `startEndOffset` is ignored.
* If neither `align` nor `startEndOffset` is provided, defaults to `'start'`.
* @default 'start'
*/
align?: 'start' | 'center' | 'end';
/** Specifies how many slides advance per navigation action. */
slidingType?: 'align-to-start' | 'reveal-one' | 'reveal-chunk' | number;
/** Number of pixels for showing "peeking" cards on the edges of the carousel.
* Adds visible offset at the start and end of the carousel to hint at more content.
* Only takes effect when `align` is not explicitly set. If `align` is provided,
* this prop is ignored. Use one or the other, not both.
*/
startEndOffset?: number;
}
export interface CarouselHandle {
slideTo: (index: number) => void;
leftIconByControlSize: (controlSize: ControlSize) => React.ReactElement;
rightIconByControlSize: (controlSize: ControlSize) => React.ReactElement;
}
export interface SliderArrowProps extends React.HTMLAttributes<HTMLDivElement> {
/** Applied as data-hook HTML attribute that can be used in the tests. */
dataHook?: string;
/** Size of the arrow button. */
arrowSize?: 'tiny' | 'small' | 'medium' | 'large';
/** Skin style of the button. */
buttonSkin?: 'standard' | 'inverted' | 'light' | 'transparent' | 'premium';
/** Icon to be rendered within the icon button. */
icon: React.ReactElement;
/** Gradient background class name. */
gradientClassName?: string;
/** Controls if the next / previous control buttons are visible, hidden or disabled at the start and end of the slideshow. */
controlsStartEnd?: 'disabled' | 'hidden';
/** Click handler for the arrow button. */
onClick?: () => void;
/** Whether the arrow button is disabled. */
disabled?: boolean;
/** Accessible label for the arrow button. */
ariaLabel?: string;
}
export interface PaginationProps {
className?: string;
originalClassName?: string;
pages: React.ReactElement[];
}
//# sourceMappingURL=Carousel.types.d.ts.map