@itwin/itwinui-react
Version:
A react component library for iTwinUI
77 lines (76 loc) • 3.76 kB
TypeScript
import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type CarouselProps = {
/**
* Index of the currently shown slide.
* Can be used to set the default index or control the active slide programmatically.
* @default 0
*/
activeSlideIndex?: number;
/**
* Callback fired when the current slide changes.
*/
onSlideChange?: (index: number) => void;
};
/**
* The Carousel component consists of a set of slides, normally displayed one at a time. A navigation section is
* shown below the slides, consisting of "dots" and "previous"/"next" buttons, used for changing slides; this navigation
* section must be present _before_ the slides in DOM order, even though it is visually shown below the slides.
*
* The currently shown slide can also be changed using the left/right arrow keys or by dragging on a touch device.
*
* This component uses a composition approach so it should be used with the provided subcomponents.
*
* @example
* <Carousel>
* <Carousel.Navigation />
* <Carousel.Slider>
* <Carousel.Slide>...</Carousel.Slide>
* <Carousel.Slide>...</Carousel.Slide>
* <Carousel.Slide>...</Carousel.Slide>
* </Carousel.Slider>
* </Carousel>
*/
export declare const Carousel: PolymorphicForwardRefComponent<"section", CarouselProps> & {
Slider: PolymorphicForwardRefComponent<"div", {}>;
Slide: PolymorphicForwardRefComponent<"div", {
index?: number;
}>;
/**
* Contains the dots and previous/next buttons for navigating the slides. Must be present _before_ the slides in DOM.
*/
Navigation: PolymorphicForwardRefComponent<"div", {}> & {
PreviousButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
isActive?: boolean;
label?: React.ReactNode;
labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
iconProps?: React.ComponentProps<"span">;
title?: string;
} & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
as?: "button" | undefined;
}>;
NextButton: PolymorphicForwardRefComponent<"button", Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "title" | "as" | "size" | "htmlDisabled" | "styleType" | "labelProps" | "isActive" | "iconProps"> & {
isActive?: boolean;
label?: React.ReactNode;
labelProps?: Omit<React.ComponentPropsWithoutRef<typeof import("../Tooltip/Tooltip.js").Tooltip>, "content" | "reference" | "ariaStrategy" | "children">;
iconProps?: React.ComponentProps<"span">;
title?: string;
} & Omit<import("../Buttons/Button.js").ButtonProps, "loading" | "startIcon" | "endIcon" | "labelProps" | "startIconProps" | "endIconProps" | "stretched"> & {
as?: "button" | undefined;
}>;
};
/**
* Contains the dots for activating the slides. Must be present _before_ the slides in DOM.
*/
DotsList: PolymorphicForwardRefComponent<"div", {
length?: number;
currentIndex?: number;
onSlideChange?: (index: number) => void;
}>;
Dot: PolymorphicForwardRefComponent<"button", {
isActive?: boolean;
isSmall?: boolean;
isSmaller?: boolean;
}>;
};
export {};