1# Panel 2<!--deprecated_code_no_check--> 3 4可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。 5 6> **说明：** 7> 8> 从API version 12 开始，该组件不再维护，推荐使用通用属性[bindSheet](ts-universal-attributes-sheet-transition.md)。 9> 10> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 11 12 13## 子组件 14 15可以包含子组件。 16 17> **说明：** 18> 19> 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../ui/state-management/arkts-rendering-control-ifelse.md)、[ForEach](../../../ui/state-management/arkts-rendering-control-foreach.md)和[LazyForEach](../../../ui/state-management/arkts-rendering-control-lazyforeach.md)）。 20 21 22## 接口 23 24Panel(show: boolean) 25 26**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 27 28**系统能力：** SystemCapability.ArkUI.ArkUI.Full 29 30**参数：** 31 32| 参数名 | 类型 | 必填 | 说明 | 33| -------- | -------- | -------- | -------- | 34| show | boolean | 是 | 控制Panel显示或隐藏。<br/>**说明：** <br/>如果设置为false时，则不占位隐藏。[Visible.None](ts-universal-attributes-visibility.md)或者show之间有一个生效时，都会生效不占位隐藏。 | 35 36## 属性 37 38除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 39 40### type 41 42type(value: PanelType) 43 44可滑动面板的类型。 45 46**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50**参数：** 51 52| 参数名 | 类型 | 必填 | 说明 | 53| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 54| value | [PanelType](#paneltype枚举说明) | 是 | 设置可滑动面板的类型。<br/>默认值：PanelType.Foldable | 55 56### mode 57 58mode(value: PanelMode) 59 60可滑动面板的初始状态。 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 70| value | [PanelMode](#panelmode枚举说明) | 是 | 设置可滑动面板的初始状态。<br/>Minibar类型默认值：PanelMode.Mini；其余类型默认值：PanelMode.Half<br />从API version 10开始，该属性支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。 | 71 72### dragBar 73 74dragBar(value: boolean) 75 76设置是否存在dragbar。 77 78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 86| value | boolean | 是 | 设置是否存在dragbar，true表示存在，false表示不存在。<br/>默认值：true | 87 88### customHeight<sup>10+</sup> 89 90customHeight(value: Dimension | PanelHeight) 91 92指定PanelType.CUSTOM状态下的高度。 93 94**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 95 96**系统能力：** SystemCapability.ArkUI.ArkUI.Full 97 98**参数：** 99 100| 参数名 | 类型 | 必填 | 说明 | 101| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 102| value | [Dimension](ts-types.md#dimension10) \| [PanelHeight](#panelheight10枚举说明) | 是 | 指定PanelType.CUSTOM状态下的高度。<br/>默认值：0<br/>**说明：** <br/>不支持设置百分比。 | 103 104### fullHeight 105 106fullHeight(value: number | string) 107 108指定PanelType.Full状态下的高度。 109 110**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 111 112**系统能力：** SystemCapability.ArkUI.ArkUI.Full 113 114**参数：** 115 116| 参数名 | 类型 | 必填 | 说明 | 117| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 118| value | number \| string | 是 | 指定PanelMode.Full状态下的高度。<br/>默认值：当前组件主轴大小减去8vp空白区<br/>**说明：** <br/>不支持设置百分比。 | 119 120### halfHeight 121 122halfHeight(value: number | string) 123 124指定PanelMode.Half状态下的高度。 125 126**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 127 128**系统能力：** SystemCapability.ArkUI.ArkUI.Full 129 130**参数：** 131 132| 参数名 | 类型 | 必填 | 说明 | 133| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 134| value | number \| string | 是 | 指定PanelMode.Half状态下的高度。<br/>默认值：当前组件主轴大小的一半。<br/>**说明：** <br/>不支持设置百分比。 | 135 136### miniHeight 137 138miniHeight(value: number | string) 139 140指定PanelMode.Mini状态下的高度。 141 142**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 143 144**系统能力：** SystemCapability.ArkUI.ArkUI.Full 145 146**参数：** 147 148| 参数名 | 类型 | 必填 | 说明 | 149| ------ | -------------------------- | ---- | ------------------------------------------------------------ | 150| value | number \| string | 是 | 指定PanelMode.Mini状态下的高度。<br/>默认值：48<br/>单位：vp<br/>**说明：** <br/>不支持设置百分比。 | 151 152### show 153 154show(value: boolean) 155 156当滑动面板弹出时调用。 157 158**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 159 160**系统能力：** SystemCapability.ArkUI.ArkUI.Full 161 162**参数：** 163 164| 参数名 | 类型 | 必填 | 说明 | 165| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 166| value | boolean | 是 | 当滑动面板弹出时调用，true显示面板，false不显示面板。 <br/>默认值：true<br/>**说明：** <br/>该属性的优先级高于参数show。 | 167 168### backgroundMask<sup>9+</sup> 169 170backgroundMask(color: ResourceColor) 171 172指定Panel的背景蒙层。 173 174**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178**参数：** 179 180| 参数名 | 类型 | 必填 | 说明 | 181| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 182| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 指定Panel的背景蒙层。<br/>默认值：'#08182431' | 183 184### showCloseIcon<sup>10+</sup> 185 186showCloseIcon(value: boolean) 187 188设置是否显示关闭图标。 189 190**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 191 192**系统能力：** SystemCapability.ArkUI.ArkUI.Full 193 194**参数：** 195 196| 参数名 | 类型 | 必填 | 说明 | 197| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 198| value | boolean | 是 | 设置是否显示关闭图标，true表示显示，false表示不显示。<br/>默认值：false | 199 200## PanelType枚举说明 201 202**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206| 名称 | 说明 | 207| -------- | -------- | 208| Minibar | 提供minibar和类全屏展示切换效果。 | 209| Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | 210| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | 211| CUSTOM<sup>10+</sup> | 配置自适应内容高度，不支持尺寸切换效果。 | 212 213## PanelMode枚举说明 214 215**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219| 名称 | 值 | 说明 | 220| -------- | -------- | -------- | 221| Mini |0| 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。| 222| Half | 1 | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | 223| Full |2 | 类全屏状态。 | 224 225## PanelHeight<sup>10+</sup>枚举说明 226 227**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 228 229**系统能力：** SystemCapability.ArkUI.ArkUI.Full 230 231| 名称 | 说明 | 232| -------- | -------- | 233| WRAP_CONTENT | 类型为CUSTOM时，自适应内容高度。 | 234## 事件 235 236除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 237 238### onChange 239 240onChange(event: (width: number, height: number, mode: PanelMode) => void) 241 242当可滑动面板发生状态变化时触发。 243 244**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 245 246**系统能力：** SystemCapability.ArkUI.ArkUI.Full 247 248**参数：** 249 250| 参数名 | 类型 | 必填 | 说明 | 251| --------- | --------- | ---- | ------------------------------------------------------------------------------------ | 252| width | number | 是 | 内容区的宽度值。 | 253| height | number | 是 | 内容区的高度值。<br/>当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 | 254| mode | PanelMode | 是 | 面板的状态。 | 255 256### onHeightChange<sup>9+</sup> 257 258onHeightChange(callback: (value: number) => void) 259 260当可滑动面板发生高度变化时触发。 261 262**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 263 264**系统能力：** SystemCapability.ArkUI.ArkUI.Full 265 266**参数：** 267 268| 参数名 | 类型 | 必填 | 说明 | 269| --------- | --------------------------------------------------- | ---- | ---------- | 270| value | number | 是 | 内容区的高度值，默认返回值单位为px。<br/>当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。<br/>因用户体验设计原因，panel最高只能滑到 fullHeight-8vp。 | 271 272## 示例 273 274```ts 275// xxx.ets 276@Entry 277@Component 278struct PanelExample { 279 @State show: boolean = false 280 281 build() { 282 Column() { 283 Text('2021-09-30 Today Calendar: 1.afternoon......Click for details') 284 .width('90%') 285 .height(50) 286 .borderRadius(10) 287 .backgroundColor(0xFFFFFF) 288 .padding({ left: 20 }) 289 .onClick(() => { 290 this.show = !this.show 291 }) 292 Panel(this.show) { // 展示日程 293 Column() { 294 Text('Today Calendar') 295 Divider() 296 Text('1. afternoon 4:00 The project meeting') 297 } 298 } 299 .type(PanelType.Foldable) 300 .mode(PanelMode.Half) 301 .dragBar(true) // 默认开启 302 .halfHeight(500) // 默认一半 303 .showCloseIcon(true) // 显示关闭图标 304 .onChange((width: number, height: number, mode: PanelMode) => { 305 console.info(`width:${width},height:${height},mode:${mode}`) 306 }) 307 }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 308 } 309} 310``` 311 312 313
