1# FolderStack 2 3The **FolderStack** component extends the **Stack** component by adding the hover feature for foldable devices. With the **upperItems** parameter set, it can automatically avoid the crease area of the foldable device and move the content to the upper half screen. 4 5> **NOTE** 6> 7> This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Multiple child components are supported. 13 14 15## APIs 16 17FolderStack(value?: { upperItems?: Array<string\> }) 18 19**Atomic service API**: This API can be used in atomic services since API version 12. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------------ | ------------------------------------------- | ---- |----------------------------------------------------------------------| 27| value | { upperItems?: Array<string\> } | No | Configuration of the **FolderStack** component.<br>- **upperItems**: array of IDs of child components that will be moved to the upper half screen in the hover state. On hover, child components with IDs in this array automatically shift away from the folding screen's crease area and move to the upper half screen, while other components are stacked in the lower half screen.| 28 29## Attributes 30 31In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 32 33### alignContent 34 35alignContent(value: Alignment) 36 37Alignment of child components in the container. When both this attribute and the universal attribute [align](ts-universal-attributes-location.md) are set, whichever is set last takes effect. 38 39**Atomic service API**: This API can be used in atomic services since API version 12. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name| Type | Mandatory| Description | 46| ------ | ------------------------------------------- | ---- | ------------------------------------------------------- | 47| value | [Alignment](ts-appendix-enums.md#alignment) | Yes | Alignment of child components in the container.<br>Default value: **Alignment.Center**| 48 49### enableAnimation 50 51enableAnimation(value: boolean) 52 53Whether to enable the default animation. 54 55**Atomic service API**: This API can be used in atomic services since API version 12. 56 57**System capability**: SystemCapability.ArkUI.ArkUI.Full 58 59**Parameters** 60 61| Name| Type | Mandatory| Description | 62| ------ | ------------------------------------------- | ---- | ----------------------------------- | 63| value | boolean | Yes | Whether to enable the default animation.<br>Default value: **true**| 64 65### autoHalfFold 66 67autoHalfFold(value: boolean) 68 69Sets whether to enable auto rotation. This attribute is effective only when auto rotation is disabled in device system settings. 70 71**Atomic service API**: This API can be used in atomic services since API version 12. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75**Parameters** 76 77| Name| Type | Mandatory| Description | 78| ------ | ------- | ---- | ----------------------------------- | 79| value | boolean | Yes | Whether to enable auto rotation.<br>Default value: **true**| 80 81> **NOTE** 82> 83> Setting the **offset** and **margin** attributes may cause the upper and lower half screens to block the crease area. Therefore, avoid setting these attributes with this component. 84 85## Events 86 87In addition to the [universal events](ts-component-general-events.md), the following events are supported. 88 89### onFolderStateChange 90 91onFolderStateChange(callback: (event: { foldStatus: FoldStatus }) => void) 92 93Called when the folding state changes. This API takes effect only in landscape mode. 94 95**Atomic service API**: This API can be used in atomic services since API version 12. 96 97**System capability**: SystemCapability.ArkUI.ArkUI.Full 98 99**Parameters** 100 101| Name | Type | Mandatory| Description | 102| ---------- | ----------------------------------------------- | ---- | -------------------- | 103| callback | (event: { foldStatus: FoldStatus }) => void | Yes | Current fold state of the device.| 104 105 106### onHoverStatusChange<sup>12+</sup> 107 108onHoverStatusChange(handler: (param: HoverEventParam) => void) 109 110Callback invoked when the hover status changes. 111 112**Atomic service API**: This API can be used in atomic services since API version 12. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116**Parameters** 117 118| Name | Type | Mandatory| Description | 119| ---------- | ----------------------------------------------- | ---- | -------------------- | 120| handler | (param: [HoverEventParam](#hovereventparam12)) => void | Yes | Callback invoked when the hover status changes.| 121 122## HoverEventParam<sup>12+</sup> 123 124**Atomic service API**: This API can be used in atomic services since API version 12. 125 126**System capability**: SystemCapability.ArkUI.ArkUI.Full 127 128| Name | Type | Mandatory| Description | 129|------------------|-------------------------------------------------------------| --- |------------| 130| foldStatus | [FoldStatus](ts-appendix-enums.md#foldstatus11) | Yes | Current fold state of the device.| 131| isHoverMode | boolean | Yes | Whether the device is in hover state. | 132| appRotation | [AppRotation](ts-appendix-enums.md#approtation12) | Yes | Current orientation. | 133| windowStatusType | [WindowStatusType](#windowstatustype12) | Yes | Window mode. | 134 135## WindowStatusType<sup>12+</sup> 136 137type WindowStatusType = WindowStatusType 138 139Enumerates the window modes. 140 141**Atomic service API**: This API can be used in atomic services since API version 12. 142 143**System capability**: SystemCapability.ArkUI.ArkUI.Full 144 145| Type | Description | 146| ---------- | ---------------------| 147| [WindowStatusType](../js-apis-window.md#windowstatustype11) | Window mode.| 148 149 150## Example 151 152This example implements the foldable device hover capability. 153 154```ts 155@Entry 156@Component 157struct Index { 158 @State len_wid: number = 480 159 @State w: string = "40%" 160 161 build() { 162 Column() { 163 // Set upperItems to IDs of the child components to be moved to the upper half screen in the hover state. Other components are stacked in the lower half screen. 164 FolderStack({ upperItems: ["upperitemsId"] }) { 165 // This column is automatically moved up to the upper half screen. 166 Column() { 167 Text("video zone").height("100%").width("100%").textAlign(TextAlign.Center).fontSize(25) 168 }.backgroundColor('rgb(0, 74, 175)').width("100%").height("100%").id("upperitemsId") 169 170 // The following two columns are stacked in the lower half screen. 171 Column() { 172 Text("video title") 173 .width("100%") 174 .height(50) 175 .textAlign(TextAlign.Center) 176 .backgroundColor('rgb(213, 213, 213)') 177 .fontSize(25) 178 }.width("100%").height("100%").justifyContent(FlexAlign.Start) 179 180 Column() { 181 Text("video bar ") 182 .width("100%") 183 .height(50) 184 .textAlign(TextAlign.Center) 185 .backgroundColor('rgb(213, 213, 213)') 186 .fontSize(25) 187 }.width("100%").height("100%").justifyContent(FlexAlign.End) 188 } 189 .backgroundColor('rgb(39, 135, 217)') 190 // Set whether to enable animation. 191 .enableAnimation(true) 192 // Set whether to enable auto-rotate. 193 .autoHalfFold(true) 194 // Called when the folding status changes. 195 .onFolderStateChange((msg) => { 196 if (msg.foldStatus === FoldStatus.FOLD_STATUS_EXPANDED) { 197 console.info("The device is currently in the expanded state") 198 } else if (msg.foldStatus === FoldStatus.FOLD_STATUS_HALF_FOLDED) { 199 console.info("The device is currently in the half folded state") 200 } else { 201 // ............. 202 } 203 }) 204 // The hoverStatusChange callback is invoked when the hover status changes. 205 .onHoverStatusChange((msg) => { 206 console.log('this foldStatus:' + msg.foldStatus); 207 console.log('this isHoverMode:' + msg.isHoverMode); 208 console.log('this appRotation:' + msg.appRotation); 209 console.log('this windowStatusType:' + msg.windowStatusType); 210 }) 211 // If the folderStack component does not occupy the full screen, it is used as a common stack. 212 .alignContent(Alignment.Bottom) 213 .height("100%") 214 .width("100%") 215 .backgroundColor('rgb(39, 135, 217)') 216 217 } 218 .height("100%") 219 .width("100%") 220 .borderWidth(1) 221 .borderColor('rgb(213, 213, 213)') 222 .backgroundColor('rgb(0, 74, 175)') 223 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) 224 } 225} 226``` 227**Figure 1** Expanded state in landscape mode 228<br>  229<br> **Figure 2** Half-folded state in landscape mode 230<br>  231
