diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md index a73447518e43234f226ca322d04418858f1df2da..4c032b32a8c40fe513661ff1030dd5f5a82e4f6c 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-panel.md +++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md @@ -2,6 +2,7 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -22,43 +23,43 @@ This component can contain child components. Panel(value:{show:boolean}) -- Parameter - | Name | Type | Mandatory | Default Value | Description | +- Parameters + | Name | Type | Mandatory | Default Value | Description | | -------- | -------- | -------- | -------- | -------- | - | show | boolean | Yes | - | Whether the panel is shown or hidden. | + | show | boolean | Yes | - | Whether the panel is shown or hidden. | ## 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. | -| 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. | +| type | PanelType | 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 | + | 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. | + | 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 | + | 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. | + | 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 | +| 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 +87,10 @@ struct PanelExample { } } .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}`) + .dragBar(true) // The drag bar is enabled by default. + .halfHeight(500) // The default value is half of the screen height. + .onChange((width: number, height: number, mode: PanelMode) => { + console.info(`width:${width},height:${height},mode:${mode}`) }) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) }