The **<Panel\>** component is a slidable panel that presents lightweight content with flexible sizes.
> **NOTE**<br>
> **NOTE**
>
> 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 **<Panel\>** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
## Required Permissions
## Required Permissions
None
None
...
@@ -38,6 +37,7 @@ Panel(value:{show:boolean})
...
@@ -38,6 +37,7 @@ Panel(value:{show:boolean})
| 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. |
| backgroundMask<sup>9+</sup>|(color: ResourceColor)| - |Background mask of the panel.|
- PanelType enums
- PanelType enums
| Name | Description |
| Name | Description |
...
@@ -58,20 +58,21 @@ Panel(value:{show:boolean})
...
@@ -58,20 +58,21 @@ Panel(value:{show:boolean})
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the panel status 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. |
| onChange(callback: (width: number, height: number, mode: PanelMode) => void) | Triggered when the panel status changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. |
| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |Triggered when the panel height changes. The returned **height** value is the height of the content area. When the value of **dragbar** is **true**, the panel height is the height of the drag bar plus the height of the content area. For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp. |
## Example
## Example
```
```ts
// xxx.ets
@Entry
@Entry
@Component
@Component
structPanelExample{
structPanelExample{
@Stateshow:boolean=false
@Stateshow:boolean=false
build(){
build(){
Column() {
Stack(){
Text('2021-09-30 Today Calendar: 1.afternoon......Click for details')
Text('2021-09-30 Today Calendar: 1.afternoon......Click for details')
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
## Required Permissions
...
@@ -16,12 +17,14 @@ None
...
@@ -16,12 +17,14 @@ None
| focusable | boolean | false | Whether the current component is focusable.|
| focusable | boolean | false | Whether the current component is focusable.|
| tabIndex<sup>9+<sup> | number | 0 | How the current component participates in sequential keyboard navigation.<br>- **tabIndex** >= 0: The component is focusable in sequential keyboard navigation, with its order defined by the value. A component with a larger value is focused after one with a smaller value. If multiple components share the same **tabIndex** value, their focus order follows their position in the component tree.<br>- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation. |
| tabIndex<sup>9+<sup> | number | 0 | How the current component participates in sequential keyboard navigation.<br>- **tabIndex** >= 0: The component is focusable in sequential keyboard navigation, with its order defined by the value. A component with a larger value is focused after one with a smaller value. If multiple components share the same **tabIndex** value, their focus order follows their position in the component tree.<br>- **tabIndex** < 0 (usually **tabIndex** = -1): The component is focusable, but cannot be reached through sequential keyboard navigation. |
> **NOTE**<br>
> **NOTE**
> The following components support focus control: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
>
> The following components support focus control: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
## Example
## Example
The effects of focus events can only be checked on real devices.
