1# Panel 2 3The **<Panel\>** component is a slidable panel that presents lightweight content with flexible sizes. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14> **NOTE** 15> 16> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control. 17 18 19## APIs 20 21Panel(show: boolean) 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| show | boolean | Yes| Whether the panel is shown.<br>**NOTE**<br>The panel is hidden and does not take up space in the layout if this parameter is set to **false** or [Visible.None](ts-universal-attributes-visibility.md) is set.| 28 29## Attributes 30 31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 32 33| Name| Type| Description| 34| -------- | -------- | -------- | 35| type | [PanelType](#paneltype)| Type of the panel.<br>Default value: **PanelType.Foldable**| 36| mode | [PanelMode](#panelmode) | Initial status of the panel.<br>Default value for the Minibar type: **PanelMode.Mini**<br/>Default value for other types: **PanelMode.Half**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 37| dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**| 38| customHeight<sup>10+</sup> | [Dimension](ts-types.md#dimension10) \| [PanelHeight](#panelheight10) | Height of the panel in the **PanelType.CUSTOM** type.<br>Default value: **0**<br>**NOTE**<br>This attribute cannot be set in percentage.| 39| fullHeight | string \| number | Height of the panel in **PanelMode.Full** mode.<br>Default value: main axis height of the panel minus 8 vp<br>**NOTE**<br>This attribute cannot be set in percentage.| 40| halfHeight | string \| number | Height of the panel in **PanelMode.Half** mode.<br>Default value: half of the main axis height of the panel<br>**NOTE**<br>This attribute cannot be set in percentage.| 41| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.<br>Default value: **48**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set in percentage.| 42| show | boolean | Whether to show the panel.<br>Default value: **true**| 43| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.<br>Default value: **'#08182431'**| 44| showCloseIcon<sup>10+</sup> | boolean | Whether to display the close icon. The value **true** means to display the close icon, and **false** means the opposite.<br>Default value: **false**| 45 46## PanelType 47 48| Name| Description| 49| -------- | -------- | 50| Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area.| 51| Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.| 52| Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.| 53| CUSTOM<sup>10+</sup> | A custom panel automatically adapts its height to the content, without support for manual size switching.| 54 55## PanelMode 56 57| Name| Description| 58| -------- | -------- | 59| Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.| 60| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.| 61| Full | Displays a panel in a large (fullscreen-like) area.| 62 63## PanelHeight<sup>10+</sup> 64 65| Name| Description| 66| -------- | -------- | 67| WRAP_CONTENT | When the type is **CUSTOM**, the panel automatically adapts its height to the content.| 68## Events 69 70In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 71 72| Name| Description| 73| -------- | -------- | 74| onChange(event: (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 panel height is the sum of the drag bar height and content area height.| 75| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the height of the panel changes. The returned height value is the height of the content area, in px by default. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.| 76 77## Example 78 79```ts 80// xxx.ets 81@Entry 82@Component 83struct PanelExample { 84 @State show: boolean = false 85 86 build() { 87 Column() { 88 Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') 89 .width('90%') 90 .height(50) 91 .borderRadius(10) 92 .backgroundColor(0xFFFFFF) 93 .padding({ left: 20 }) 94 .onClick(() => { 95 this.show = !this.show 96 }) 97 Panel(this.show) { // Display the agenda. 98 Column() { 99 Text('Today Calendar') 100 Divider() 101 Text('1. afternoon 4:00 The project meeting') 102 } 103 } 104 .type(PanelType.Foldable) 105 .mode(PanelMode.Half) 106 .dragBar(true) // The drag bar is enabled by default. 107 .halfHeight(500) // The panel height is half of the screen height by default. 108 .showCloseIcon(true) // Display the close icon. 109 .onChange((width: number, height: number, mode: PanelMode) => { 110 console.info(`width:${width},height:${height},mode:${mode}`) 111 }) 112 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 113 } 114} 115``` 116 117 118
