@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
167 lines (166 loc) • 6.64 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { CarouselAlignControls, CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, BreakpointCustomizable, CarouselSlidesPerPage, CarouselWidth } from '../types';
export type PCarouselProps = BaseProps & {
/**
* Sets the zero-based index of the currently visible slide. Update this to navigate programmatically.
* @default 0
*/
activeSlideIndex?: number;
/**
* Controls the alignment of custom slotted controls within the header area.
* @default 'auto'
*/
alignControls?: CarouselAlignControls;
/**
* Controls the horizontal alignment of the heading and description.
* @default 'start'
*/
alignHeader?: CarouselAlignHeader;
/**
* Sets ARIA attributes on the carousel region element for improved accessibility.
*/
aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
/**
* Sets the description text displayed below the heading for additional context.
*/
description?: string;
/**
* When enabled, each slide is individually focusable and the carousel navigates one slide at a time instead of one page.
* @default false
*/
focusOnCenterSlide?: boolean;
/**
* Shows a gradient fade at the start and end edges to visually indicate more slides beyond the viewport.
* @default false
*/
gradient?: boolean;
/**
* Sets the heading text displayed above the carousel. Also used as the accessible label when no `aria` prop is set.
*/
heading?: string;
/**
* Sets the font size of the carousel heading.
* @default 'x-large'
*/
headingSize?: CarouselHeadingSize;
/**
* Overrides the default label strings used for the previous, next, and page indicators — useful for localization.
*/
intl?: CarouselInternationalization;
/**
* Emitted when the carousel navigates to a new slide, with the active and previous slide indexes in the event detail.
*/
onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
/**
* Shows pagination dot indicators below the carousel. Supports responsive breakpoint values.
* @default false
*/
pagination?: BreakpointCustomizable<boolean>;
/**
* Enables infinite looping — navigating past the last slide wraps back to the first, and vice versa.
* @default false
*/
rewind?: boolean;
/**
* Sets the `href` of an in-page skip link that lets keyboard users jump past the carousel slides.
*/
skipLinkTarget?: string;
/**
* Sets how many slides are visible at once. Use `auto` to control each slide's width via CSS. Supports responsive breakpoint values.
* @default 1
*/
slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
/**
* Removes whitespace before the first and after the last slide when `focusOnCenterSlide` is enabled.
* @default false
*/
trimSpace?: boolean;
/**
* Sets the maximum width and outer spacing of the carousel, aligned to PDS grid widths.
* @default 'basic'
*/
width?: CarouselWidth;
};
export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "inputMode" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
/**
* Sets the zero-based index of the currently visible slide. Update this to navigate programmatically.
* @default 0
*/
activeSlideIndex?: number;
/**
* Controls the alignment of custom slotted controls within the header area.
* @default 'auto'
*/
alignControls?: CarouselAlignControls;
/**
* Controls the horizontal alignment of the heading and description.
* @default 'start'
*/
alignHeader?: CarouselAlignHeader;
/**
* Sets ARIA attributes on the carousel region element for improved accessibility.
*/
aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
/**
* Sets the description text displayed below the heading for additional context.
*/
description?: string;
/**
* When enabled, each slide is individually focusable and the carousel navigates one slide at a time instead of one page.
* @default false
*/
focusOnCenterSlide?: boolean;
/**
* Shows a gradient fade at the start and end edges to visually indicate more slides beyond the viewport.
* @default false
*/
gradient?: boolean;
/**
* Sets the heading text displayed above the carousel. Also used as the accessible label when no `aria` prop is set.
*/
heading?: string;
/**
* Sets the font size of the carousel heading.
* @default 'x-large'
*/
headingSize?: CarouselHeadingSize;
/**
* Overrides the default label strings used for the previous, next, and page indicators — useful for localization.
*/
intl?: CarouselInternationalization;
/**
* Emitted when the carousel navigates to a new slide, with the active and previous slide indexes in the event detail.
*/
onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
/**
* Shows pagination dot indicators below the carousel. Supports responsive breakpoint values.
* @default false
*/
pagination?: BreakpointCustomizable<boolean>;
/**
* Enables infinite looping — navigating past the last slide wraps back to the first, and vice versa.
* @default false
*/
rewind?: boolean;
/**
* Sets the `href` of an in-page skip link that lets keyboard users jump past the carousel slides.
*/
skipLinkTarget?: string;
/**
* Sets how many slides are visible at once. Use `auto` to control each slide's width via CSS. Supports responsive breakpoint values.
* @default 1
*/
slidesPerPage?: BreakpointCustomizable<CarouselSlidesPerPage>;
/**
* Removes whitespace before the first and after the last slide when `focusOnCenterSlide` is enabled.
* @default false
*/
trimSpace?: boolean;
/**
* Sets the maximum width and outer spacing of the carousel, aligned to PDS grid widths.
* @default 'basic'
*/
width?: CarouselWidth;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;