1# Panel
2
3The **Panel** component is a slidable panel that presents lightweight content with flexible sizes.
4
5>  **NOTE**
6>
7>  This component is deprecated since API version 12. You are advised to use the universal attribute [bindSheet](ts-universal-attributes-sheet-transition.md) instead.
8>
9>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Child Components
13
14Supported
15
16>  **NOTE**
17>
18>  Built-in components and custom components are allowed, with support for ([if/else](../../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
19
20
21## APIs
22
23Panel(show: boolean)
24
25**Atomic service API**: This API can be used in atomic services since API version 11.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name| Type| Mandatory| Description|
32| -------- | -------- | -------- | -------- |
33| show | boolean | Yes| Whether the panel is shown.<br>**NOTE**<br>The panel is hidden and does not take up space in the layout if this parameter is set to **false** or [Visible.None](ts-universal-attributes-visibility.md) is set.|
34
35## Attributes
36
37In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
38
39### type
40
41type(value: PanelType)
42
43Sets the type of the panel.
44
45**Atomic service API**: This API can be used in atomic services since API version 11.
46
47**System capability**: SystemCapability.ArkUI.ArkUI.Full
48
49**Parameters**
50
51| Name | Type                                                        | Mandatory| Description                                                        |
52| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
53| value   | [PanelType](#paneltype)| Yes  | Type of the panel.<br>Default value: **PanelType.Foldable**|
54
55### mode
56
57mode(value: PanelMode)
58
59Sets the initial mode of the panel.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters**
66
67| Name | Type                                                        | Mandatory| Description                                                        |
68| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
69| value   | [PanelMode](#panelmode) | Yes  | Initial mode of the panel.<br>Default value for the Minibar type: PanelMode.Mini; default value for other types: PanelMode.Half<br>Since API version 10, this attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).|
70
71### dragBar
72
73dragBar(value: boolean)
74
75Sets whether to enable a drag bar.
76
77**Atomic service API**: This API can be used in atomic services since API version 11.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Full
80
81**Parameters**
82
83| Name | Type                                                        | Mandatory| Description                                                        |
84| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
85| value   | boolean | Yes  | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**|
86
87### customHeight<sup>10+</sup>
88
89customHeight(value: Dimension | PanelHeight)
90
91Sets the height of the panel in the **PanelType.CUSTOM** type.
92
93**Atomic service API**: This API can be used in atomic services since API version 11.
94
95**System capability**: SystemCapability.ArkUI.ArkUI.Full
96
97**Parameters**
98
99| Name | Type                                                        | Mandatory| Description                                                        |
100| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
101| value   | [Dimension](ts-types.md#dimension10) \| [PanelHeight](#panelheight10) | Yes  | Height of the panel in the **PanelType.CUSTOM** type.<br>Default value: **0**<br>**NOTE**<br>This attribute cannot be set in percentage.|
102
103### fullHeight
104
105fullHeight(value: number | string)
106
107Sets the height of the panel in the **PanelType.Full** type.
108
109**Atomic service API**: This API can be used in atomic services since API version 11.
110
111**System capability**: SystemCapability.ArkUI.ArkUI.Full
112
113**Parameters**
114
115| Name| Type                      | Mandatory| Description                                                        |
116| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
117| value  | number \| string | Yes  | Height of the panel in **PanelMode.Full** mode.<br>Default value: main axis height of the panel minus 8 vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
118
119### halfHeight
120
121halfHeight(value: number | string)
122
123Sets the height of the panel in **PanelMode.Half** mode.
124
125**Atomic service API**: This API can be used in atomic services since API version 11.
126
127**System capability**: SystemCapability.ArkUI.ArkUI.Full
128
129**Parameters**
130
131| Name| Type                      | Mandatory| Description                                                        |
132| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
133| value  | number \| string | Yes  | Height of the panel in **PanelMode.Half** mode.<br>Default value: half of the main axis height of the panel<br>**NOTE**<br>This attribute cannot be set in percentage.|
134
135### miniHeight
136
137miniHeight(value: number | string)
138
139Panel height in the **PanelMode.Mini** mode.
140
141**Atomic service API**: This API can be used in atomic services since API version 11.
142
143**System capability**: SystemCapability.ArkUI.ArkUI.Full
144
145**Parameters**
146
147| Name| Type                      | Mandatory| Description                                                        |
148| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
149| value  | number \| string | Yes  | Panel height in the **PanelMode.Mini** mode.<br>Default value: **48**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
150
151### show
152
153show(value: boolean)
154
155Sets whether the panel is shown.
156
157**Atomic service API**: This API can be used in atomic services since API version 11.
158
159**System capability**: SystemCapability.ArkUI.ArkUI.Full
160
161**Parameters**
162
163| Name | Type                                                        | Mandatory| Description                                                        |
164| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
165| value   | boolean | Yes  | Whether the panel is shown. The value **true** means to show the panel, and **false** means the opposite.<br>Default value: **true**<br>**NOTE**<br>The priority of this attribute is higher than that of the **show** parameter.|
166
167### backgroundMask<sup>9+</sup>
168
169backgroundMask(color: ResourceColor)
170
171Background mask of the panel.
172
173**Atomic service API**: This API can be used in atomic services since API version 11.
174
175**System capability**: SystemCapability.ArkUI.ArkUI.Full
176
177**Parameters**
178
179| Name | Type                                                        | Mandatory| Description                                                        |
180| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
181| color   | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background mask of the panel.<br>Default value: **'#08182431'**|
182
183### showCloseIcon<sup>10+</sup>
184
185showCloseIcon(value: boolean)
186
187Sets whether to display the close icon.
188
189**Atomic service API**: This API can be used in atomic services since API version 11.
190
191**System capability**: SystemCapability.ArkUI.ArkUI.Full
192
193**Parameters**
194
195| Name | Type                                                        | Mandatory| Description                                                        |
196| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
197| value   | boolean | Yes  | Whether to display the close icon. The value **true** means to display the close icon, and **false** means the opposite.<br>Default value: **false**|
198
199## PanelType
200
201**Atomic service API**: This API can be used in atomic services since API version 11.
202
203**System capability**: SystemCapability.ArkUI.ArkUI.Full
204
205| Name| Description|
206| -------- | -------- |
207| Minibar | A minibar panel that displays content in the minibar area or a large (fullscreen-like) area.|
208| Foldable | A foldable panel that displays permanent content in a large (fullscreen-like), medium-sized (halfscreen-like), or small area.|
209| Temporary | A temporary panel that displays content in a large (fullscreen-like) or medium-sized (halfscreen-like) area.|
210| CUSTOM<sup>10+</sup> | A custom panel that automatically adapts its height to the content, but does not support manual resizing.|
211
212## PanelMode
213
214**Atomic service API**: This API can be used in atomic services since API version 11.
215
216**System capability**: SystemCapability.ArkUI.ArkUI.Full
217
218| Name| Value| Description|
219| -------- | -------- | -------- |
220| Mini |0| Displays a **minibar** or **foldable** panel in its minimum size. This attribute does not take effect for **temporary** panels.|
221| Half | 1 | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.|
222| Full |2  | Displays a panel in a large (fullscreen-like) area.|
223
224## PanelHeight<sup>10+</sup>
225
226**Atomic service API**: This API can be used in atomic services since API version 11.
227
228**System capability**: SystemCapability.ArkUI.ArkUI.Full
229
230| Name| Description|
231| -------- | -------- |
232| WRAP_CONTENT | When the type is **CUSTOM**, the panel automatically adapts its height to the content.|
233## Events
234
235In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
236
237### onChange
238
239onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void)
240
241Triggered when the status of the panel changes.
242
243**Atomic service API**: This API can be used in atomic services since API version 11.
244
245**System capability**: SystemCapability.ArkUI.ArkUI.Full
246
247**Parameters**
248
249| Name   | Type       | Mandatory| Description                                                                                 |
250| --------- | ---------  | ---- | ------------------------------------------------------------------------------------ |
251| width     | number     | Yes  | Width of the content area.                                                                      |
252| height    | number     | Yes  | Height of the content area.<br>When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.|
253| mode      | PanelMode  | Yes  | Mode of the panel.                                                                          |
254
255### onHeightChange<sup>9+</sup>
256
257onHeightChange(callback: (value: number) => void)
258
259Triggered when the height of the panel changes.
260
261**Atomic service API**: This API can be used in atomic services since API version 11.
262
263**System capability**: SystemCapability.ArkUI.ArkUI.Full
264
265**Parameters**
266
267| Name   | Type                                               | Mandatory| Description      |
268| --------- | --------------------------------------------------- | ---- | ---------- |
269| value     | number  | Yes  | Height of the content area. The default unit is px.<br>When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.<br>For user experience purposes, the panel can be slid to only this height: **fullHeight** - 8 vp.|
270
271## Example
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) { // Display calendar events.
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) // The drag bar is enabled by default.
301      .halfHeight(500) // The panel height is half of the screen height by default.
302      .showCloseIcon(true) // Display the close icon.
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![en-us_image_0000001174422896](figures/en-us_image_0000001174422896.gif)
312