@fluentui/react-northstar/dist/es/components/Carousel/Carousel.d.ts

A themable React component library.

import { Accessibility, CarouselBehaviorProps } from '@fluentui/accessibility';
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { UIComponentProps, ChildrenComponentProps } from '../../utils';
import { ShorthandCollection, ShorthandValue, ComponentEventHandler, FluentComponentStaticProps } from '../../types';
import { CarouselItem, CarouselItemProps } from './CarouselItem';
import { CarouselNavigation, CarouselNavigationProps } from './CarouselNavigation';
import { CarouselNavigationItem, CarouselNavigationItemProps } from './CarouselNavigationItem';
import { CarouselPaddle, CarouselPaddleProps } from './CarouselPaddle';
import { CarouselPaddlesContainer } from './CarouselPaddlesContainer';
export interface CarouselSlotClassNames {
    itemsContainer: string;
    paddleNext: string;
    paddlePrevious: string;
    pagination: string;
    navigation: string;
}
export interface CarouselProps extends UIComponentProps, ChildrenComponentProps {
    /**
     * Accessibility behavior if overridden by the user.
     * @available menuAsToolbarBehavior, tabListBehavior, tabBehavior
     */
    accessibility?: Accessibility<CarouselBehaviorProps>;
    /** Index of the currently active item. */
    activeIndex?: number;
    /**
     * Sets the aria-roledescription attribute.
     */
    'aria-roledescription'?: string;
    /**
     * Sets the aria-label attribute for carousel.
     */
    'aria-label'?: string;
    /** Specifies if the process of switching slides is circular. */
    circular?: boolean;
    /** Initial activeIndex value. */
    defaultActiveIndex?: number;
    /**
     * Message generator for item position in the carousel. Used to generate the
     * text for pagination. Also generates invisible text content for each item
     * which is added along with the slide content. These are used by the screen
     * reader to narrate position when active item is changed.
     */
    getItemPositionText?: (index: number, size: number) => string;
    /** Shorthand array of props for CarouselItem. */
    items?: ShorthandCollection<CarouselItemProps>;
    thumbnails?: boolean;
    /** Shorthand array of props for the buttons of the CarouselNavigation. */
    navigation?: ShorthandValue<CarouselNavigationProps> | ShorthandCollection<CarouselNavigationItemProps>;
    /**
     * A Carousel can position its navigation below the content by default,
     * above the content, to the start or to the end of the content.
     */
    navigationPosition?: 'below' | 'above' | 'start' | 'end';
    /**
     * Called when a panel title is clicked.
     *
     * @param {SyntheticEvent} event - React's original SyntheticEvent.
     * @param {object} data - All Carousel props.
     */
    onActiveIndexChange?: ComponentEventHandler<CarouselProps>;
    /** Shorthand for the paddle that navigates to the next item. */
    paddleNext?: ShorthandValue<CarouselPaddleProps>;
    /**
     * A Carousel can position its paddels inside the content, outside or inline
     * with the navigation component.
     */
    paddlesPosition?: 'inside' | 'outside' | 'inline';
    /** Shorthand for the paddle that navigates to the previous item. */
    paddlePrevious?: ShorthandValue<CarouselPaddleProps>;
    /** A navigation may be clickable */
    disableClickableNav?: boolean;
    /** Define animation to slide on enter from previous item. */
    animationEnterFromPrev?: string;
    /** Define animation to slide on enter from next item. */
    animationEnterFromNext?: string;
    /** Define animation to slide on exit to previous item. */
    animationExitToPrev?: string;
    /** Define animation to slide on exit to next item. */
    animationExitToNext?: string;
}
export declare type CarouselStylesProps = {
    isFromKeyboard: boolean;
    shouldFocusContainer: boolean;
};
export declare const carouselClassName = "ui-carousel";
export declare const carouselSlotClassNames: CarouselSlotClassNames;
/**
 * A Carousel displays data organised as a gallery.
 *
 * @accessibility
 * Implements [ARIA Carousel](https://www.w3.org/WAI/tutorials/carousels/structure/) design pattern.
 * @accessibilityIssues
 * [VoiceOver doens't narrate label referenced by aria-labelledby attribute, when role is "tabpanel"](https://bugs.chromium.org/p/chromium/issues/detail?id=1040924)
 */
export declare const Carousel: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof CarouselProps> & {
    as?: TExtendedElementType;
} & CarouselProps) => JSX.Element) & {
    propTypes?: React.WeakValidationMap<CarouselProps> & {
        as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
    };
    contextTypes?: PropTypes.ValidationMap<any>;
    defaultProps?: Partial<CarouselProps & {
        as: "div";
    }>;
    displayName?: string;
    readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
        ref?: React.Ref<HTMLDivElement>;
    }, "as" | keyof CarouselProps> & {
        as?: "div";
    } & CarouselProps;
} & FluentComponentStaticProps<CarouselProps> & {
    Item: typeof CarouselItem;
    Navigation: typeof CarouselNavigation;
    NavigationItem: typeof CarouselNavigationItem;
    Paddle: typeof CarouselPaddle;
    PaddlesContainer: typeof CarouselPaddlesContainer;
};