1# Panel 2 3可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12可以包含子组件。 13 14> **说明：** 15> 16> 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 17 18 19## 接口 20 21Panel(show: boolean) 22 23**参数：** 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| -------- | -------- | -------- | -------- | 27| show | boolean | 是 | 控制Panel显示或隐藏。<br/>**说明：** <br/>如果设置为false时，则不占位隐藏。[Visible.None](ts-universal-attributes-visibility.md)或者show之间有一个生效时，都会生效不占位隐藏。 | 28 29## 属性 30 31除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 32 33| 名称 | 参数类型 | 描述 | 34| -------- | -------- | -------- | 35| type | [PanelType](#paneltype枚举说明) | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable | 36| mode | [PanelMode](#panelmode枚举说明) | 设置可滑动面板的初始状态。<br/>Minibar类型默认值：PanelMode.Mini；其余类型默认值：PanelMode.Half<br />从API version 10开始，该属性支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 37| dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。<br/>默认值：true | 38| customHeight<sup>10+</sup> | [Dimension](ts-types.md#dimension10) \| [PanelHeight](#panelheight10枚举说明) | 指定PanelType.CUSTOM状态下的高度。<br/>默认值：0<br/>**说明：** <br/>不支持设置百分比。 | 39| fullHeight | string \| number | 指定PanelMode.Full状态下的高度。<br/>默认值：当前组件主轴大小减去8vp空白区<br/>**说明：** <br/>不支持设置百分比。 | 40| halfHeight | string \| number | 指定PanelMode.Half状态下的高度。<br/>默认值：当前组件主轴大小的一半。<br/>**说明：** <br/>不支持设置百分比。 | 41| miniHeight | string \| number | 指定PanelMode.Mini状态下的高度。<br/>默认值：48<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。 | 42| show | boolean | 当滑动面板弹出时调用，true显示面板，false不显示面板。 <br/>默认值：true<br/>**说明：** <br/>该属性的优先级高于参数show。 | 43| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|指定Panel的背景蒙层。<br/>默认值：'#08182431' | 44| showCloseIcon<sup>10+</sup> | boolean | 设置是否显示关闭图标，true表示显示，false表示不显示。<br/>默认值：false | 45 46## PanelType枚举说明 47 48| 名称 | 描述 | 49| -------- | -------- | 50| Minibar | 提供minibar和类全屏展示切换效果。 | 51| Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | 52| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | 53| CUSTOM<sup>10+</sup> | 配置自适应内容高度，不支持尺寸切换效果。 | 54 55## PanelMode枚举说明 56 57| 名称 | 值 | 描述 | 58| -------- | -------- | -------- | 59| Mini |0| 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。| 60| Half | 1 | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | 61| Full |2 | 类全屏状态。 | 62 63## PanelHeight<sup>10+</sup>枚举说明 64 65| 名称 | 描述 | 66| -------- | -------- | 67| WRAP_CONTENT | 类型为CUSTOM时，自适应内容高度。 | 68## 事件 69 70除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 71 72| 名称 | 功能描述 | 73| -------- | -------- | 74| onChange(event: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | 75| onHeightChange(callback: (value: number) => void)<sup>9+</sup> |当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，默认返回值单位为px。当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因，panel最高只能滑到 fullHeight-8vp。 | 76 77## 示例 78 79```ts 80// xxx.ets 81@Entry 82@Component 83struct PanelExample { 84 @State show: boolean = false 85 86 build() { 87 Column() { 88 Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') 89 .width('90%') 90 .height(50) 91 .borderRadius(10) 92 .backgroundColor(0xFFFFFF) 93 .padding({ left: 20 }) 94 .onClick(() => { 95 this.show = !this.show 96 }) 97 Panel(this.show) { // 展示日程 98 Column() { 99 Text('Today Calendar') 100 Divider() 101 Text('1. afternoon 4:00 The project meeting') 102 } 103 } 104 .type(PanelType.Foldable) 105 .mode(PanelMode.Half) 106 .dragBar(true) // 默认开启 107 .halfHeight(500) // 默认一半 108 .showCloseIcon(true) // 显示关闭图标 109 .onChange((width: number, height: number, mode: PanelMode) => { 110 console.info(`width:${width},height:${height},mode:${mode}`) 111 }) 112 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 113 } 114} 115``` 116 117 118
