# Panel The **** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component. ## Required Permissions None ## Child Components This component can contain child components. ## APIs Panel$value:\{show:boolean\}$ - Parameter

Name	Type	Mandatory	Default Value	Description
show	boolean	Yes	-	Whether the panel is shown or hidden.

## Attributes

Name	Type	Default Value	Description
type	PanelType	Foldable	Type of the panel.
mode	PanelMode	-	Initial status of the panel.
dragBar	boolean	true	Whether to enable a drag bar. The value true means that the drag bar will be displayed, and false means the opposite.
fullHeight	Length	-	Panel height in the PanelMode.Full mode.
halfHeight	Length	-	Panel height in the PanelMode.Half mode. The default value is half of the screen height.
miniHeight	Length	-	Panel height in the PanelMode.Mini mode.

- PanelType enums

Name	Description
Minibar	A minibar panel displays content in the minibar area or a large (fullscreen-like) area.
Foldable	A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.
Temporary	A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.

- PanelMode enums

Name	Description
Mini	Displays a minibar or foldable panel in its minimum size. This attribute does not take effect for temporary panels.
Half	Displays a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for minibar panels.
Full	Displays a panel in a large (fullscreen-like) area.

## Events

Name		Description
onChange(callback: (width: number, height: number, mode: PanelMode) => void)		Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of dragbar is true, the height of the panel is the dragbar height plus the height of the content area.

## Example ``` @Entry @Component struct PanelExample { @State show: boolean = false build() { Column() { Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') .width('90%').height(50).borderRadius(10) .backgroundColor(0xFFFFFF).padding({ left: 20 }) .onClick(() => { this.show = !this.show }) Panel(this.show) { // Display the agenda. Column() { Text('Today Calendar') Divider() Text('1. afternoon 4:00 The project meeting') } } .type(PanelType.Foldable).mode(PanelMode.Half) .dragBar(true) // The dragbar is enabled by default. .halfHeight(500) // Half of the height by default .onChange((value: any) => { console.info(`width:${value.width},height:${value.height},mode:${value.mode}`) }) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) } } ``` ![](figures/panel.gif)