Panel API

API documentation for Panel component

PanelRoot#

Props#

Defines valid properties in Panel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelRootInstance) => ReactNode)	null	The children to render.
open	boolean	false	Controls the open state of the collapsible.
defaultOpen	boolean	false	Defines the initial open state of the collapsible.
onOpen	(event?: SyntheticEvent) => void	null	Callback triggered when the content is opened.
onClose	(event?: SyntheticEvent) => void	null	Callback triggered when the content is closed.
toggleable	boolean	false	When enabled, the content of panel can be expanded and collapsed by clicking the header.
onToggle	(event: PanelRootToggleEvent) => void	null	Callback fired when the panel's toggle state changes.
onOpenChange	(event: usePanelOpenChangeEvent) => void	null	Callback triggered when the content's toggle state changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Panel component.

name	type	default	description
open	boolean	null	Whether the collapsible content is open or not.

Exposes#

Defines the methods and properties exposed by Panel component.

name	type	default	description
open	(event?: SyntheticEvent) => void	null	The method to open the collapsible content.
close	(event?: SyntheticEvent) => void	null	The method to close the collapsible content.
toggle	(event?: SyntheticEvent) => void	null	The method to toggle the collapsible content.
state	usePanelState	null	The state of the usePanel.
onTriggerClick	(event?: SyntheticEvent) => void	null	Callback to be invoked when the trigger is clicked.

Events#

PanelRootToggleEvent

Event fired when the panel's toggle state changes.

name	type	description
originalEvent	SyntheticEvent	The original event that triggered the change.
value	boolean	The value of the collapsible.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Panel component.

name	type	default	description
root	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
header	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
headerActions	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header actions's DOM element.
title	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
content	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
collapse	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the collapse's DOM element.
footer	PanelRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of Panel component.

values
ComponentInstance<PanelRootProps, PanelRootState, PanelRootExposes>

PanelHeader#

Props#

Defines valid properties in PanelHeadercomponent.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelHeadercomponent.

name	type	default	description
root	PanelHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PanelHeadercomponent.

values
ComponentInstance<PanelHeaderProps, PanelHeaderState, PanelHeaderExposes>

PanelHeaderActions#

Props#

Interfaces#

Types#

PanelTitle#

Props#

Defines valid properties in PanelTitlecomponent.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelTitleInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelTitlecomponent.

name	type	default	description
root	PanelTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PanelTitlecomponent.

values
ComponentInstance<PanelTitleProps, PanelTitleState, PanelTitleExposes>

PanelCollapse#

Props#

Defines valid properties in PanelCollapse component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelCollapseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelCollapseInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelCollapsePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelCollapseInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the PanelCollapse with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the PanelCollapse.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the PanelCollapse.
rounded	boolean	true	Whether to show the PanelCollapse with a rounded style.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelCollapse component.

name	type	default	description
root	PanelCollapsePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PanelCollapse component.

values
ComponentInstance<PanelCollapseProps, PanelCollapseState, PanelCollapseExposes>

PanelContent#

Props#

Defines valid properties in PanelContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelContent component.

name	type	default	description
root	PanelContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PanelContent component.

values
ComponentInstance<PanelContentProps, PanelContentState, PanelContentExposes>

PanelFooter#

Props#

Defines valid properties in PanelFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: PanelFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: PanelFooterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<PanelFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: PanelFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of PanelFooter component.

name	type	default	description
root	PanelFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of PanelFooter component.

values
ComponentInstance<PanelFooterProps, PanelFooterState, PanelFooterExposes>

Panel API

PanelRoot#

Props#

State#

Exposes#

Events#

PanelRootToggleEvent

Interfaces#

PassThroughOptions

Types#

Instance

PanelHeader#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

PanelHeaderActions#

Props#

Interfaces#

Types#

PanelTitle#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

PanelCollapse#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

PanelContent#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

PanelFooter#

Props#

Interfaces#

PassThroughOptions

Types#

Instance

usePanel#

Props#

State#

Exposes#

Events#

Types#