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 15## APIs 16 17Panel(show: boolean) 18 19**Parameters** 20 21| Name| Type| Mandatory| Description| 22| -------- | -------- | -------- | -------- | 23| show | boolean | Yes| Whether the panel is shown.| 24 25 26## Attributes 27 28| Name| Type| Description| 29| -------- | -------- | -------- | 30| type | [PanelType](#paneltype)| Type of the panel.<br>Default value: **PanelType.Foldable**| 31| mode | [PanelMode](#panelmode) | Initial status of the panel.| 32| 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**| 33| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.| 34| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.| 35| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.| 36| show | boolean | Whether to show the panel.| 37| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.| 38 39## PanelType 40 41| Name| Description| 42| -------- | -------- | 43| Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-like) area.| 44| Foldable | A foldable panel displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.| 45| Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.| 46 47## PanelMode 48 49| Name| Description| 50| -------- | -------- | 51| Mini | Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.| 52| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.| 53| Full | Displays a panel in a large (fullscreen-like) area.| 54 55 56## Events 57 58| Name| Description| 59| -------- | -------- | 60| 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.| 61| 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.| 62 63## Example 64 65```ts 66// xxx.ets 67@Entry 68@Component 69struct PanelExample { 70 @State show: boolean = false 71 72 build() { 73 Column() { 74 Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') 75 .width('90%').height(50).borderRadius(10) 76 .backgroundColor(0xFFFFFF).padding({ left: 20 }) 77 .onClick(() => { 78 this.show = !this.show 79 }) 80 Panel(this.show) { // Display the agenda. 81 Column() { 82 Text('Today Calendar') 83 Divider() 84 Text('1. afternoon 4:00 The project meeting') 85 } 86 } 87 .type(PanelType.Foldable).mode(PanelMode.Half) 88 .dragBar(true) // The drag bar is enabled by default. 89 .halfHeight(500) // The panel height is half of the screen height by default. 90 .onChange((width: number, height: number, mode: PanelMode) => { 91 console.info(`width:${width},height:${height},mode:${mode}`) 92 }) 93 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 94 } 95} 96``` 97 98 99
