Panel

可滑動面板，提供一種輕量的內容展示窗口，方便在不同尺寸中切換。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

可以包含子組件。

說明：
子組件類型：系統組件和自定義組件，支持渲染控制類型（[if/else]、[ForEach]和[LazyForEach]）。

接口

Panel(show: boolean)

參數：

參數名	參數類型	必填	參數描述
show	boolean	是	控制Panel顯示或隱藏。說明：如果設置為false時，則不占位隱藏。[Visible.None]或者show之間有一個生效時，都會生效不占位隱藏。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
type	[PanelType]	設置可滑動面板的類型。默認值：PanelType.Foldable
mode	[PanelMode]	設置可滑動面板的初始狀態。 Minibar類型默認值：PanelMode.Mini；其余類型默認值：PanelMode.Half 從API version 10開始，該屬性支持[$$]雙向綁定變量。
dragBar	boolean	設置是否存在dragbar，true表示存在，false表示不存在。默認值：true
customHeight10+	[Dimension]	[PanelHeight]
fullHeight	string	number
halfHeight	string	number
miniHeight	string	number
show	boolean	當滑動面板彈出時調用。默認值：true
backgroundMask9+	[ResourceColor]	指定Panel的背景蒙層。默認值：'#08182431'

PanelType枚舉說明

名稱	描述
Minibar	提供minibar和類全屏展示切換效果。
Foldable	內容永久展示類，提供大（類全屏）、中（類半屏）、小三種尺寸展示切換效果。
Temporary	內容臨時展示區，提供大（類全屏）、中（類半屏）兩種尺寸展示切換效果。
CUSTOM10+	配置自適應內容高度，不支持尺寸切換效果。

PanelMode枚舉說明

名稱	描述
Mini	類型為minibar和foldable時，為最小狀態；類型為temporary，則不生效。
Half	類型為foldable和temporary時，為類半屏狀態；類型為minibar，則不生效。
Full	類全屏狀態。

PanelHeight10+枚舉說明

名稱	描述
WRAP_CONTENT	類型為CUSTOM時，自適應內容高度。

事件

除支持[通用事件]外，還支持以下事件：

名稱`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	功能描述
onChange(event: (width: number, height: number, mode: PanelMode) => void)	當可滑動面板發生狀態變化時觸發，返回的height值為內容區高度值，當dragbar屬性為true時，panel本身的高度值為dragbar高度加上內容區高度。
onHeightChange(callback: (value: number) => void)9+	當可滑動面板發生高度變化時觸發，返回的height值為內容區高度值，默認返回值單位為px。當dragbar屬性為true時，panel本身的高度值為dragbar高度加上內容區高度。因用戶體驗設計原因，panel最高只能滑到 fullHeight-8vp。

示例

// 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) { // 展示日程
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable)
      .mode(PanelMode.Half)
      .dragBar(true) // 默認開啟
      .halfHeight(500) // 默認一半
      .onChange((width: number, height: number, mode: PanelMode) = > {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}