/** * AccordionStandard component */ /// import React from 'react'; import { Sizes } from '../../core/types'; import './AccordionStandard.scss'; export interface AccordionStandardProps { open?: boolean; highlighted?: boolean; initialOpen?: boolean; onHeaderClick?: () => void; onCaretClick?: () => void; isTitleClickable?: boolean; onToggle?: () => void; onOpen?: () => void; onClose?: () => void; className?: string; style?: React.CSSProperties; size?: Sizes; color?: string; headerStyle?: React.CSSProperties; headerLeftStyle?: React.CSSProperties; headerRightStyle?: React.CSSProperties; bodyStyle?: React.CSSProperties; footerStyle?: React.CSSProperties; hasColorItem?: boolean; hasColorBlock?: boolean; colorBlockColor?: string; hasCaret?: boolean; draggable?: boolean; hasHoverBtn?: boolean; hoverBtnIcon?: React.ReactNode; hoverBtnOnClick?: () => void; children?: React.ReactNode; title?: string | React.ReactNode; header?: React.ReactNode | string; body?: React.ReactNode | string; footer?: React.ReactNode | string; footerTitle?: string; onSetTimeout?: (timer: NodeJS.Timeout) => void; } /** * AccordionStandard component * @param props * @param open - boolean to control the open state of the accordion * @param highlighted - boolean to control the highlighted state of the accordion * @param initialOpen - boolean to control the initial open state of the accordion * @param onHeaderClick - callback function to handle the header click event * @param onCaretClick - callback function to be called if user clicks on the caret * @param isTitleClickable - boolean to make the title clickable * @param onToggle - callback function to handle the toggle event * @param onOpen - callback function to handle the open event * @param onClose - callback function to handle the close event * @param className - additional class name for the accordion * @param overrideClassName - override class name for the AccordionStandard component * @param style - additional styles for the accordion * @param size - size of the accordion. Use the enum `Sizes` to set the size. * @param color - custom color for the accordion color item * @param headerStyle - additional styles for the header * @param headerLeftStyle - additional styles for the right class in header * @param headerRightStyle - additional styles for the left class in header * @param bodyStyle - additional styles for the body * @param footerStyle - additional styles for the footer * @param hasColorItem - boolean to show the color item on the left side of the accordion * @param hasColorBlock - boolean to show the color square block on the left side of the title * @param colorBlockColor - custom color for the accordion color block * @param hasCaret - boolean to show the caret icon on the left side of the accordion * @param draggable - boolean to show the draggable icon on the left side of the accordion * @param hasHoverBtn - whether to have the hover button or not * @param hoverBtnIcon - icon for the hover button * @param hoverBtnOnClick - callback function for the hover button * @portal Title - h3 element to be rendered in the header, style: uppercase * @portal Header - span element to be rendered at the end of the header * @portal Body - main element to be rendered in the body * @portal Footer - footer element to be rendered in the footer * @note - `Title`, `Header`, `Body`, `Footer`, `FooterTitle` are the portals. U can also choose to pass in content through props, but not recommended. * @example * * Accordion Title *
Accordion Header
* Accordion Body * *
* @returns AccordionStandard component */ export declare const AccordionStandard: (props: AccordionStandardProps) => import("react/jsx-runtime").JSX.Element; export declare const AccordionBasic: (props: AccordionStandardProps) => import("react/jsx-runtime").JSX.Element; export default AccordionStandard;