• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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 region 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
19Since API version 11, this API is supported in ArkTS widgets.
20
21**Parameters**
22
23| Name      | Type                                   | Mandatory| Description                                                                |
24| ------------ | ------------------------------------------- | ---- |----------------------------------------------------------------------|
25| upperItems |  Array<string\> | No  | IDs of the child components that will be moved to the upper half screen in the hover state. Other components are stacked in the lower half screen.|
26
27
28
29## Attributes
30
31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
32
33| Name             | Type                                       | Description                                                                                                                           |
34|-----------------|---------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------|
35| alignContent    | [Alignment](ts-appendix-enums.md#alignment) | Alignment of child components in the container.<br>Default value: **Alignment.Center**<br>**NOTE**<br>When both this attribute and the universal attribute [align](ts-universal-attributes-location.md) are set, whichever is set last takes effect.|
36| enableAnimation | boolean                                     | Whether to enable the default animation.<br>Default value: **true**                                                                                                    |
37| autoHalfFold    | boolean                                     | Whether to enable auto rotation. This attribute is effective only when auto rotation is disabled in device system settings.<br>Default value: **true**                                                                                                           |
38>  **NOTE**
39>
40>  Setting the **offset** and **margin** attributes may cause the upper and lower half screens to block the crease region. Therefore, avoid setting these attributes with this component.
41
42## Events
43
44In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
45
46| Name                                                               | Description                                          |
47|-------------------------------------------------------------------|------------------------------------------------|
48| onFolderStateChange (callback: (event: { foldStatus: [FoldStatus](ts-appendix-enums.md#foldstatus11) }) => void) | Called when the folding state changes. This API takes effect only in landscape mode.<br>- **foldStatus**: folding status of the device.|
49
50## Example
51
52```ts
53@Entry
54@Component
55struct Index {
56  @State len_wid: number = 480
57  @State w: string = "40%"
58  build() {
59    Column() {
60      // 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.
61      FolderStack({ upperItems: ["upperitemsId"] }) {
62        // This column is automatically moved up to the upper half screen.
63        Column() {
64          Text("vedio zone").height("100%").width("100%").textAlign(TextAlign.Center).fontSize(25)
65        }.backgroundColor(Color.Pink).width("100%").height("100%").id("upperitemsId")
66
67        // The following two columns are stacked in the lower half screen.
68        Column() {
69          Text("vedio title")
70            .width("100%")
71            .height(50)
72            .textAlign(TextAlign.Center)
73            .backgroundColor(Color.Red)
74            .fontSize(25)
75        }.width("100%").height("100%").justifyContent(FlexAlign.Start)
76
77        Column() {
78          Text("vedie bar ")
79            .width("100%")
80            .height(50)
81            .textAlign(TextAlign.Center)
82            .backgroundColor(Color.Red)
83            .fontSize(25)
84        }.width("100%").height("100%").justifyContent(FlexAlign.End)
85      }
86      .backgroundColor(Color.Yellow)
87      // Set whether to enable animation.
88      .enableAnimation(true)
89      // Set whether to enable auto-rotate.
90      .autoHalfFold(true)
91      // Called when the folding status changes.
92      .onFolderStateChange((msg) => {
93        if (msg.foldStatus === FoldStatus.FOLD_STATUS_EXPANDED) {
94          console.info("The device is currently in the expanded state")
95        } else if (msg.foldStatus === FoldStatus.FOLD_STATUS_HALF_FOLDED) {
96          console.info("The device is currently in the half folded state")
97        } else {
98          // .............
99        }
100      })
101      // If the <folderStack> component does not occupy the full screen, it is used as a common stack.
102      .alignContent(Alignment.Bottom)
103      .height("100%")
104      .width("100%")
105      .borderWidth(1)
106      .backgroundColor(Color.Yellow)
107
108    }
109    .height("100%")
110    .width("100%")
111    .borderWidth(1)
112    .backgroundColor(Color.Pink)
113    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
114
115  }
116}
117```
118