PanelProps
type PanelProps = {
label?: string;
children: React.ReactNode;
isCustom?: boolean;
style?: React.CSSProperties;
wrapperClassname?: string;
headerClassname?: string;
headerVariant?: Variant;
headerSemanticColor?: SemanticColor;
headerLink?: string;
headerActions?: React.ReactNode;
headerOnClose?: () => void;
headerPreventDefaultClose?: boolean;
headerOnBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
};
Property | Type | Description |
---|---|---|
label | string | undefined | Label of the Panel. |
children | React.ReactNode | Children to render inside the Panel. Must be a React Component. |
isCustom | boolean | undefined | Determine if the children passed is a custom Panel. If true, the children will be rendered as is. Note: All passed props except children will be ignored if enabled. |
style | React.CSSProperties | undefined | Inline styles to apply to the Panel skeleton. |
wrapperClassname | string | undefined | Additional class name to apply to the Panel content wrapper. |
headerClassname | string | undefined | Additional class name to apply to the Panel header. |
headerVariant | Variant | undefined | Font variant for the Panel header title. |
headerSemanticColor | SemanticColor | undefined | Semantic color name for the Panel header title. |
headerLink | string | undefined | Href for the header link. Can be either a URI, a path within the app, or a URL for an external link. |
headerActions | React.ReactNode | undefined | Additional actions to render in the header. Will be rendered next to the close button. |
headerOnClose | () => void | undefined | Function to call when clicking on the header close button. Called before the panel is closed. |
headerPreventDefaultClose | boolean | undefined | Prevent the panel from closing when clicking on the header close button. |
headerOnBack | (event: React.MouseEvent<HTMLButtonElement>) => void | undefined | Function to call when clicking on the header back button. If not provided, the back button will not be rendered. |