1# Panel 2 3可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14 15## 接口 16 17Panel(show: boolean) 18 19**参数：** 20 21| 参数名 | 参数类型 | 必填 | 参数描述 | 22| -------- | -------- | -------- | -------- | 23| show | boolean | 是 | 控制Panel显示或隐藏。 | 24 25 26## 属性 27 28| 名称 | 参数类型 | 描述 | 29| -------- | -------- | -------- | 30| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable | 31| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。 | 32| dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。<br/>默认值：true | 33| fullHeight | string \| number | 指定PanelMode.Full状态下的高度。 | 34| halfHeight | string \| number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 | 35| miniHeight | string \| number | 指定PanelMode.Mini状态下的高度。 | 36| show | boolean | 当滑动面板弹出时调用。 | 37 38## PanelType枚举说明 39 40| 名称 | 描述 | 41| -------- | -------- | 42| Minibar | 提供minibar和类全屏展示切换效果。 | 43| Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | 44| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | 45 46## PanelMode枚举说明 47 48| 名称 | 描述 | 49| -------- | -------- | 50| Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 | 51| Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | 52| Full | 类全屏状态。 | 53 54 55## 事件 56 57| 名称 | 功能描述 | 58| -------- | -------- | 59| onChange(event: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | 60| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因，panel最高只能滑到 fullHeight-8vp。 | 61 62## 示例 63 64```ts 65// xxx.ets 66@Entry 67@Component 68struct PanelExample { 69 @State show: boolean = false 70 71 build() { 72 Stack() { 73 Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') 74 .width('90%').height(50).borderRadius(10) 75 .backgroundColor(0xFFFFFF).padding({ left: 20 }) 76 .onClick(() => { 77 this.show = !this.show 78 }) 79 Panel(this.show) { // 展示日程 80 Column() { 81 Text('Today Calendar') 82 Divider() 83 Text('1. afternoon 4:00 The project meeting') 84 } 85 } 86 .type(PanelType.Foldable).mode(PanelMode.Half) 87 .dragBar(true) // 默认开启 88 .halfHeight(500) // 默认一半 89 .onChange((width: number, height: number, mode: PanelMode) => { 90 console.info(`width:${width},height:${height},mode:${mode}`) 91 }) 92 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 93 } 94} 95``` 96 97 98
