@mantine/carousel/lib/Carousel.d.ts

Embla based carousel

import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
import { BoxProps, DataAttributes, ElementProps, Factory, MantineSpacing, StyleProp, StylesApiProps } from '@mantine/core';
import { type CarouselContextValue } from './Carousel.context';
import { CarouselSlide } from './CarouselSlide/CarouselSlide';
export type CarouselStylesNames = 'slide' | 'root' | 'viewport' | 'container' | 'controls' | 'control' | 'indicators' | 'indicator';
export type CarouselCssVariables = {
    root: '--carousel-height' | '--carousel-control-size' | '--carousel-controls-offset';
};
export interface CarouselProps extends BoxProps, StylesApiProps<CarouselFactory>, ElementProps<'div'> {
    /** Options passed down to embla carousel */
    emblaOptions?: EmblaOptionsType;
    /** `Carousel.Slide` components */
    children?: React.ReactNode;
    /** Called when next slide is shown */
    onNextSlide?: () => void;
    /** Called when previous slider is shown */
    onPreviousSlide?: () => void;
    /** Called with slide index when slide changes */
    onSlideChange?: (index: number) => void;
    /** Get embla API as ref */
    getEmblaApi?: (embla: EmblaCarouselType) => void;
    /** Props passed down to next control */
    nextControlProps?: React.ComponentProps<'button'>;
    /** Props passed down to previous control */
    previousControlProps?: React.ComponentProps<'button'>;
    /** Controls size of the next and previous controls @default 26 */
    controlSize?: React.CSSProperties['width'];
    /** Controls position of the next and previous controls, key of `theme.spacing` or any valid CSS value @default 'sm' */
    controlsOffset?: MantineSpacing;
    /** Controls slide width based on viewport width @default '100%' */
    slideSize?: StyleProp<string | number>;
    /** Key of theme.spacing or number to set gap between slides */
    slideGap?: StyleProp<MantineSpacing>;
    /** Carousel orientation @default 'horizontal' */
    orientation?: 'horizontal' | 'vertical';
    /** Determines type of queries used for responsive styles @default 'media' */
    type?: 'media' | 'container';
    /** Slides container `height`, required for vertical orientation */
    height?: React.CSSProperties['height'];
    /** Determines whether gap between slides should be treated as part of the slide size @default true */
    includeGapInSize?: boolean;
    /** Index of initial slide */
    initialSlide?: number;
    /** Determines whether next/previous controls should be displayed @default true */
    withControls?: boolean;
    /** Determines whether indicators should be displayed @default false */
    withIndicators?: boolean;
    /** A list of embla plugins */
    plugins?: EmblaPluginType[];
    /** Icon of the next control */
    nextControlIcon?: React.ReactNode;
    /** Icon of the previous control */
    previousControlIcon?: React.ReactNode;
    /** Determines whether arrow key should switch slides @default true */
    withKeyboardEvents?: boolean;
    /** Function to get props for indicator button */
    getIndicatorProps?: (index: number) => ElementProps<'button'> & DataAttributes;
}
export type CarouselFactory = Factory<{
    props: CarouselProps;
    ref: HTMLDivElement;
    stylesNames: CarouselStylesNames;
    vars: CarouselCssVariables;
    staticComponents: {
        Slide: typeof CarouselSlide;
    };
}>;
export declare const Carousel: import("@mantine/core").MantineComponent<{
    props: CarouselProps;
    ref: HTMLDivElement;
    stylesNames: CarouselStylesNames;
    vars: CarouselCssVariables;
    staticComponents: {
        Slide: typeof CarouselSlide;
    };
}>;
export declare namespace Carousel {
    type Props = CarouselProps;
    type CssVariables = CarouselCssVariables;
    type Factory = CarouselFactory;
    type StylesNames = CarouselStylesNames;
    type ContextValue = CarouselContextValue;
}