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