目录

Panel

The Panel component is a slidable panel that presents lightweight content with flexible sizes.

This component is deprecated since API version 12. You are advised to use the universal attribute bindSheet instead.

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Supported.

Allowed child component types: built-in and custom components, including rendering control types (if/else, ForEach, and LazyForEach).

APIs

Panel(show: boolean)

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
show boolean Yes

Whether the panel is shown.

NOTE

The panel is hidden and does not take up space in the layout if this parameter is set to false If either Visible.None or show is valid, the panel is hidden without occupying space.

Attributes

In addition to the universal attributes, the following attributes are supported.

[h2]type

type(value: PanelType)

Sets the type of the panel.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value PanelType Yes

Type of the panel.

Default value: PanelType.Foldable

[h2]mode

mode(value: PanelMode)

Sets the initial mode of the panel.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value PanelMode Yes

Initial mode of the panel.

Default value for the Minibar type: PanelMode.Mini; default value for other types: PanelMode.Half

Since API version 10, this attribute supports two-way binding through $$.

[h2]dragBar

dragBar(value: boolean)

Sets whether to enable a drag bar.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value boolean Yes

Whether to enable a drag bar. The value true means that the drag bar will be displayed, and false means the opposite.

Default value: true

[h2]customHeight10+

customHeight(value: Dimension | PanelHeight)

Sets the height of the panel in the PanelType.CUSTOM type.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value Dimension | PanelHeight Yes

Panel height in the PanelType.CUSTOM mode.

Default value: 0

NOTE

Percentage values are not supported.

[h2]fullHeight

fullHeight(value: number | string)

Sets the height of the panel in the PanelType.Full type.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number | string Yes

Panel height in the PanelMode.Full mode.

Default value: main axis height of the panel minus 8 vp

NOTE

Percentage values are not supported.

[h2]halfHeight

halfHeight(value: number | string)

Sets the height of the panel in PanelMode.Half mode.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number | string Yes

Panel height in the PanelMode.Half mode.

Default value: half of the main axis height of the panel

NOTE

Percentage values are not supported.

[h2]miniHeight

miniHeight(value: number | string)

Sets the height of the panel in the PanelMode.Mini mode.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number | string Yes

Panel height in the PanelMode.Mini mode.

Default value: 48

Unit: vp

NOTE

Percentage values are not supported.

[h2]show

show(value: boolean)

Set whether to show the panel.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value boolean Yes

Whether to show the panel. The value true means to show the panel, and false means the opposite.

Default value: true

NOTE

The priority of this attribute is higher than that of the show parameter.

[h2]backgroundMask9+

backgroundMask(color: ResourceColor)

Set the background mask of the panel.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
color ResourceColor Yes

Background mask of the panel.

Default value: '#08182431'

[h2]showCloseIcon10+

showCloseIcon(value: boolean)

Sets whether to display the close icon.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value boolean Yes

Whether to display the close icon. The value true means to display the close icon, and false means the opposite.

Default value: false

PanelType

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Description
Minibar A minibar panel that displays content in the minibar area or a large (fullscreen-like) area.
Foldable A foldable panel that displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.
Temporary A temporary panel that displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.
CUSTOM10+ A custom panel that automatically adapts its height to the content, but does not support manual resizing.

PanelMode

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Value Description
Mini 0 Displays a minibar or foldable panel in its minimum size. This attribute does not take effect for temporary panels.
Half 1 Displays a foldable or temporary panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for minibar panels.
Full 2 Displays a panel in a large (fullscreen-like) area.

PanelHeight10+

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name Description
WRAP_CONTENT When the type is CUSTOM, the panel automatically adapts its height to the content.

Events

In addition to the universal events, the following events are supported.

[h2]onChange

onChange(event: (width: number, height: number, mode: PanelMode) => void)

Triggered when the status of the panel changes.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
width number Yes Width of the content area.
height number Yes

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.
mode PanelMode Yes Mode of the panel.

[h2]onHeightChange9+

onHeightChange(callback: (value: number) => void)

Triggered when the height of the panel changes.

Model constraint: This API can be used only in the stage model.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name Type Mandatory Description
value number Yes

Height of the content area. The default unit is px.

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.

Examples

// xxx.ets
@Entry
@Component
struct PanelExample {
  @State show: boolean = false

  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%')
        .height(50)
        .borderRadius(10)
        .backgroundColor(0xFFFFFF)
        .padding({ left: 20 })
        .onClick(() => {
          this.show = !this.show
        })
      Panel(this.show) { // Display calendar events.
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable)
      .mode(PanelMode.Half)
      .dragBar(true) // The drag bar is enabled by default.
      .halfHeight(500) // The panel height is half of the screen height by default.
      .showCloseIcon(true) // Display the close icon.
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}