提交 1471eb02 编写于 作者: E ester.zhou

update doc

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 58420267
# Panel # Panel
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
The **&lt;Panel&gt;** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component. The **&lt;Panel&gt;** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
...@@ -22,43 +22,43 @@ This component can contain child components. ...@@ -22,43 +22,43 @@ This component can contain child components.
Panel(value:{show:boolean}) Panel(value:{show:boolean})
- Parameter - Parameters
| Name | Type | Mandatory | Default Value | Description | | 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 ## Attributes
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | PanelType | PanelType.Foldable | Type of the panel. | | type | PanelType | PanelType.Foldable | Type of the panel. |
| mode | PanelMode | - | Initial status 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. | | 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. | | 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. | | 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. | | miniHeight | Length | - | Panel height in the **PanelMode.Mini** mode. |
- PanelType enums - PanelType enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| Minibar | A minibar panel displays content in the minibar area or a large (fullscreen-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. | | 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. | | Temporary | A temporary panel displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area. |
- PanelMode enums - 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. | | 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. | | 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. | | Full | Displays a panel in a large (fullscreen-like) area. |
## Events ## Events
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onChange(callback: (width: number, height: number, mode: PanelMode) =&gt; 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) =&gt; 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 ## Example
...@@ -86,10 +86,10 @@ struct PanelExample { ...@@ -86,10 +86,10 @@ struct PanelExample {
} }
} }
.type(PanelType.Foldable).mode(PanelMode.Half) .type(PanelType.Foldable).mode(PanelMode.Half)
.dragBar(true) // The dragbar is enabled by default. .dragBar(true) // The drag bar is enabled by default.
.halfHeight(500) // Half of the height by default .halfHeight(500) // The default value is half of the screen height.
.onChange((value: any) => { .onChange((width: number, height: number, mode: PanelMode) => {
console.info(`width:${value.width},height:${value.height},mode:${value.mode}`) console.info(`width:${width},height:${height},mode:${mode}`)
}) })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册