1# stack 2 3The **\<stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported. 13 14 15## Attributes 16 17| Name | Type | Default Value | Mandatory | Description | 18| ----- | ------ | ---- | ---- | ---------------------------------------- | 19| id | string | - | No | Unique ID of the component. | 20| style | string | - | No | Style declaration of the component. | 21| class | string | - | No | Style class of the component, which is used to refer to a style table. | 22| ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.| 23 24 25## Events 26 27| Name | Parameter | Description | 28| ------------------ | --------------------------------- | ----------- | 29| click | - | Triggered when the component is clicked. | 30| longpress | - | Triggered when the component is long pressed. | 31| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component.| 32 33 34## Styles 35 36| Name | Type | Default Value | Mandatory | Description | 37| ---------------------------------- | ---------------------------------------- | ----- | ---- | ---------------------------------------- | 38| width | <length> \| <percentage><sup>5+</sup> | - | No | Component width.<br><br>If this attribute is not set, the default value **0** is used. | 39| height | <length> \| <percentage><sup>5+</sup> | - | No | Component height.<br><br>If this attribute is not set, the default value **0** is used. | 40| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 41| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | 42| margin | <length> \| <percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 43| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. | 44| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | 45| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | 46| border-radius | <length> | - | No | Radius of round-corner borders. | 47| background-color | <color> | - | No | Background color. | 48| opacity<sup>5+</sup> | number | 1 | No | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. | 49| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 50| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 51 52> **NOTE** 53> 54> The absolute positioning does not support a percentage. Therefore, **margin** cannot be set for the child components of the **\<stack>** component. 55 56 57## Example 58 59 60```html 61<!-- xxx.hml --> 62<stack class="stack-parent"> 63 <div class="back-child bd-radius"></div> 64 <div class="positioned-child bd-radius"></div> 65 <div class="front-child bd-radius"></div> 66</stack> 67``` 68 69 70```css 71/* xxx.css */ 72.stack-parent { 73 width: 400px; 74 height: 400px; 75 background-color: #ffffff; 76 border-width: 1px; 77 border-style: solid; 78} 79.back-child { 80 width: 300px; 81 height: 300px; 82 background-color: #3f56ea; 83} 84.front-child { 85 width: 100px; 86 height: 100px; 87 background-color: #00bfc9; 88} 89.positioned-child { 90 width: 100px; 91 height: 100px; 92 left: 50px; 93 top: 50px; 94 background-color: #47cc47; 95} 96.bd-radius { 97 border-radius: 16px; 98} 99``` 100 101 102
