ts-container-stack.md 1.1 KB
Newer Older
Z
zengyawen 已提交
1
# Stack
Z
zengyawen 已提交
2

E
ester.zhou 已提交
3
The **\<Stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5 6 7
>  **NOTE**
>
>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
8

Z
zengyawen 已提交
9

E
esterzhou 已提交
10
## Child Components
Z
zengyawen 已提交
11

E
ester.zhou 已提交
12
Supported
Z
zengyawen 已提交
13 14 15 16


## APIs

E
ester.zhou 已提交
17
Stack(value?: { alignContent?: Alignment })
Z
zengyawen 已提交
18

E
ester.zhou 已提交
19
**Parameters**
Z
zengyawen 已提交
20

E
ester.zhou 已提交
21 22 23
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| alignContent | [Alignment](ts-appendix-enums.md#alignment) | No| Alignment of child components in the container.<br>Default value: **Alignment.Center**|
Z
zengyawen 已提交
24 25


E
ester.zhou 已提交
26
## Example
Z
zengyawen 已提交
27

E
ester.zhou 已提交
28 29
```ts
// xxx.ets
Z
zengyawen 已提交
30 31 32 33 34 35 36 37 38 39 40 41
@Entry
@Component
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
      Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
    }.width('100%').height(150).margin({ top: 5 })
  }
}
```

42
![en-us_image_0000001219982699](figures/en-us_image_0000001219982699.PNG)