> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>  **NOTE**<br/>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
The **<Panel>** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
...
...
@@ -22,7 +22,7 @@ This component can contain child components.
Panel(value:{show:boolean})
- Parameter
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| show | boolean | Yes | - | Whether the panel is shown or hidden. |
...
...
@@ -30,7 +30,7 @@ Panel(value:{show:boolean})
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| type | PanelType | PanelType.Foldable | Type of the panel. |
| mode | PanelMode | - | Initial status of the panel. |
...
...
@@ -56,9 +56,9 @@ Panel(value:{show:boolean})
## Events
| Name | Description |
| 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. |
| 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 drag bar height plus the height of the content area. |
## Example
...
...
@@ -86,10 +86,10 @@ struct PanelExample {
}
}
.type(PanelType.Foldable).mode(PanelMode.Half)
.dragBar(true) // The dragbar is enabled by default.