@carbon/ibm-products/lib/components/Carousel/Carousel.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2023, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { ReactNode } from 'react';
export interface CarouselProps {
    /**
     * Provide the contents of the Carousel.
     */
    children: ReactNode;
    /**
     * Provide an optional class to be applied to the containing node.
     */
    className?: string;
    /**
     * Disables the ability of the Carousel to scroll
     * use a keyboard's left and right arrow keys.
     */
    disableArrowScroll?: boolean;
    /**
     * Enables the edges of the component to have faded styling.
     *
     * Pass a single string (`$color`) to specify the same color for left and right.
     *
     * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
     */
    fadedEdgeColor?: string | {
        left: string;
        right: string;
    };
    /**
     * An optional callback function that returns `true`
     * when the carousel has enough content to be scrollable,
     * and `false` when there is not enough content.
     */
    onChangeIsScrollable?: (isScrollable: boolean) => void;
    /**
     * An optional callback function that returns the scroll position as
     * a value between 0 and 1.
     */
    onScroll?: (scrollPercent: number) => void;
    /**
     * Additional props passed to the component.
     */
    [key: string]: any;
    /**
     * enable scroll mode when only scroll functionality is required, more than one items will be visible at a time
     * when isScrollMode is false, component behaves like a carousal and on item will be active at a time
     * and other items will be hidden and inactive.
     */
    isScrollMode?: boolean;
}
/**
 * The Carousel acts as a scaffold for other Onboarding content.
 *
 * This component is not intended for general use.
 *
 * Expected scrolling behavior.
 * 1. Scroll the maximum number of visible items at a time.
 * 2. The left-most item should always be left-aligned in the viewport.
 *
 * Exception.
 * 1. After scrolling to the last (right-most) item,
 *      if some of its content remains hidden,
 *      then nudge it to the right until it is right-aligned.
 * 2. From the right-aligned position, when scrolling left,
 *      the left-most item should again be left-aligned.
 */
declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { Carousel };