@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.
99 lines (98 loc) • 4.65 kB
TypeScript
import type { BaseProps } from '../../BaseProps';
import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, BreakpointCustomizable, AccordionUpdateEventDetail, AccordionSize } from '../types';
export type PAccordionProps = BaseProps & {
/**
* Positions the expand/collapse marker icon at the start or end of the summary section.
* @default 'end'
*/
alignMarker?: AccordionAlignMarker;
/**
* Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
* @default 'none'
*/
background?: AccordionBackground;
/**
* Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
*/
compact?: boolean;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
*/
heading?: string;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
* @default 'h2'
*/
headingTag?: AccordionHeadingTag;
/**
* Indents the slotted content to be vertically aligned with the text of the summary section.
* @default false
*/
indent?: BreakpointCustomizable<boolean>;
/**
* Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
*/
onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
/**
* Controls whether the accordion is open or closed.
*/
open?: boolean;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
* @default 'small'
*/
size?: BreakpointCustomizable<AccordionSize>;
/**
* @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
*/
sticky?: boolean;
};
export declare const PAccordion: 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"> & {
/**
* Positions the expand/collapse marker icon at the start or end of the summary section.
* @default 'end'
*/
alignMarker?: AccordionAlignMarker;
/**
* Sets the background color of the accordion panel. Use `frosted` only when placed on images, videos, or gradients.
* @default 'none'
*/
background?: AccordionBackground;
/**
* Reduces padding and spacing for a more compact layout, useful in space-constrained interfaces.
*/
compact?: boolean;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading text within the summary section.
*/
heading?: string;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
* @default 'h2'
*/
headingTag?: AccordionHeadingTag;
/**
* Indents the slotted content to be vertically aligned with the text of the summary section.
* @default false
*/
indent?: BreakpointCustomizable<boolean>;
/**
* Emitted when the user toggles the accordion open or closed, with the new open state in the event detail.
*/
onUpdate?: (event: CustomEvent<AccordionUpdateEventDetail>) => void;
/**
* Controls whether the accordion is open or closed.
*/
open?: boolean;
/**
* @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
* @default 'small'
*/
size?: BreakpointCustomizable<AccordionSize>;
/**
* @experimental Makes the summary section sticky at the top while scrolling. Only works with `background="canvas"` or `background="surface"`. Not compatible with `summary-before` or `summary-after` slots.
*/
sticky?: boolean;
} & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<HTMLElement>>;