• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stack
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @lanshouren-->
5<!--Designer: @lanshouren-->
6<!--Tester: @liuli0427-->
7<!--Adviser: @HelloCrease-->
8
9
10堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
11
12> **说明:**
13>
14>从API Version 8 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
15
16
17## 子组件
18
19支持。
20
21
22## 属性
23
24支持[通用属性](js-service-widget-common-attributes.md)。
25
26
27## 样式
28
29支持[通用样式](js-service-widget-common-styles.md)。
30
31
32## 事件
33
34支持[通用事件](js-service-widget-common-events.md)。
35
36
37## 示例
38
39
40```html
41<!-- xxx.hml -->
42<stack class="stack-parent">
43  <div class="back-child bd-radius"></div>
44  <div class="positioned-child bd-radius"></div>
45  <div class="front-child bd-radius"></div>
46</stack>
47```
48
49
50```css
51/* xxx.css */
52.stack-parent {
53  width: 400px;
54  height: 400px;
55  margin: 50px;
56  background-color: #ffffff;
57  border-width: 1px;
58  border-style: solid;
59}
60.back-child {
61  width: 300px;
62  height: 300px;
63  background-color: #3f56ea;
64}
65.front-child {
66  width: 100px;
67  height: 100px;
68  background-color: #00bfc9;
69}
70.positioned-child {
71  width: 100px;
72  height: 100px;
73  left: 50px;
74  top: 50px;
75  background-color: #47cc47;
76}
77.bd-radius {
78  border-radius: 16px;
79}
80```
81**4*4卡片**
82
83![卡片 stack](figures/stack.PNG)
84
85