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