Panel
Toggle content visibility using Panel.
install | yarn add @clayui/panel |
---|---|
version | |
use | import Panel from '@clayui/panel'; |
Table of Contents
The Panel is a replacement for the old ClayCollapse in version 2.x, has the same effect but written in React using composition, try it. We recommend that you review the use cases in the Storybook.
Basic Usage
import {Provider} from '@clayui/core'; import Panel from '@clayui/panel'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Panel collapsable displayTitle="Title" displayType="secondary" showCollapseIcon={true} > <Panel.Body>{'Body!'}</Panel.Body> </Panel> </div> </Provider> ); }
Usage with a custom Title
ClayPanel.Title
allows you to add custom content to the title of the panel as seen in this example using ClayLabels
.
import {Provider} from '@clayui/core'; import Panel from '@clayui/panel'; import Label from '@clayui/label'; import React from 'react'; export default function App() { return ( <Provider spritemap="/icons.svg"> <div className="p-4"> <Panel collapsable displayTitle={ <Panel.Title> <h3>{'Title'}</h3> <span>{'If field '}</span> <Label displayType="success">{'Country'}</Label> <Label>{'Is Equal To'}</Label> <span>{'value '}</span> <Label displayType="info">{'Brazil'}</Label> <span>{'enable '}</span> <Label displayType="success">{'State'}</Label> </Panel.Title> } displayType="secondary" showCollapseIcon={true} > <Panel.Body>{'Body!'}</Panel.Body> </Panel> </div> </Provider> ); }
API Reference
Panel
typeof Panel
Parameters
collapsable
boolean | undefined
Flag to indicate that Panel is collapsable.
collapseClassNames
string | undefined
Adds classes to the collapse element. Only when collapsable
is true.
collapseHeaderClassNames
string | undefined
Adds classes to the collapse header element. Only when collapsable
is true.
defaultExpanded
boolean | undefined
Flag to indicate the initial value of expanded (uncontrolled).
displayTitle
React.ReactNode
Content to display in Panel Title.
displayType
"block" | "default" | "secondary" | "unstyled" | undefined
Flag to indicate the visual variation of the Panel.
expanded
boolean | undefined
Determines if menu is expanded or not (controlled).
onExpandedChange
InternalDispatch<boolean> | undefined
Callback for when dropdown changes its active state (controlled).
showCollapseIcon
boolean | undefined
Flag to toggle collapse icon visibility when collapsable
is true.
size
"sm" | "lg" | undefined
Flag to indicate the visual variation of the Panel.
spritemap
string | undefined
Path to spritemap for clay icons
Returns
ElementBody
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementGroup
({ children, className, fluid, fluidFirst, fluidLast, flush, small, ...otherProps }: IProps) => JSX.Element
Parameters
fluidFirst
boolean | undefined
Flag to signify that panel-group-fluid-first
class should be added.
This class generally should be used inside card or sheet
fluidLast
boolean | undefined
Flag to signify that panel-group-fluid-last
class should be added.
This class generally should be used inside card or sheet
fluid
boolean | undefined
Flag to signify that panel-group-fluid
class should be added.
This class generally should be used inside card or sheet
flush
boolean | undefined
Flag to signify that panel-group-flush
class should be added.
This class generally should be used inside card, sheet, or a type of padded container.
small
boolean | undefined
Flag to enable the small variation for panels within a group of panels.
Returns
ElementFooter
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementHeader
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementTitle
({ children, className, ...otherProps }: React.HTMLAttributes<HTMLDivElement>) => JSX.Element
Returns
ElementContributors
Last edited May 9, 2025 at 6:15:38 AM
Table of Contents