openharmony container component Panel

Panel: Sliding panel. Provides a lightweight content display window that can be easily switched between different sizes. It is a pop-up component.

Panel(value:{show：boolean})
    show:Control Panel to show or hide

Attributes:
type : Set the type of the sliding panel (default PanelType.Foldable)
    PanelType:
    Minibar: Provide minibar and full-screen display switching effects
    Foldable: Content permanent display class, providing large (full-screen-like), medium (half-screen-like), small three Temporary: Temporary content display
    area, providing two sizes of large (like full screen) and medium (like half screen) display switching effect
mode : Set the initial state of the sliding panel
    Mini: When the type is minibar and foldable, it is Minimum state; if the type is temporary, it will not take effect.
    Half: When the type is foldable and temporary, it will be a half-screen state; if the type is minibar, it will not take effect. Full: It will be a
    full-screen state.
DragBar : Set whether a dragbar exists. True means it exists, false means it exists. does not exist
fullHeight : Specifies the height in the PanelMode.Full state
halfHeight : Specifies the height in the PanelMode.Half state, the default is half the screen size
miniHeight : Specifies the height in the PanelMode.Mini state
Event:
onChange(callback: (width: number, height: number, mode: PanelMode) => void)
Triggered when the status of the sliding panel changes. The returned height value is the height value of the content area. When the dragbar attribute is true, the height value of the panel itself is the height of the dragbar plus the height of the content area.

Effect:

Code:

@Entry
@Component
struct PanelPage {
  @State show: boolean = false

  build() {
    Column() {
      Text('panel 测试')
        .fontSize(30)
        .width('90%')
        .borderRadius(10)
        .backgroundColor(0xFFFFFF)
        .textAlign(TextAlign.Center)
        .padding(10)
        .onClick(() => {
          this.show = !this.show
        })
      Panel(this.show) {
        Column() {
          Text('panel标题').fontSize(25)
          Divider().margin({ top: 20, bottom: 20 })
          Text('panel内容体').fontSize(30)
        }
      }
      .type(PanelType.Foldable)
      .mode(PanelMode.Half)
      .dragBar(true)//默认开启
      .halfHeight(500)//默认一半
      .onChange((width: number, height: number, mode: PanelMode) => {
        console.info(`width:${width},height:${height},model:${mode}`)
      })
    }
    .width('100%')
    .height('100%')
  }
}