1# list 2 3The **\<list>** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text. 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 12Only [\<list-item>](js-lite-components-container-list-item.md) is supported. 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| scrollend | - | Triggered when the list stops scrolling.| 30| click | - | Triggered when the list is clicked. | 31| longpress | - | Triggered when the list is long pressed. | 32| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the list. | 33| scrolltop<sup>8+</sup> | - | Triggered when the list is scrolled to the top.| 34| scrollbottom<sup>8+</sup> | - | Triggered when the list is scrolled to the bottom.| 35 36 37## Styles 38 39| Name| Type| Default Value| Mandatory| Description| 40| -------- | -------- | -------- | -------- | -------- | 41| flex-direction | string | column | No| Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: Items are placed vertically from top to bottom.<br>- **row**: Items are placed horizontally from left to right.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**. Dynamic modification is not supported.| 42| width | <length> \| <percentage><sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used. | 43| height | <length> \| <percentage><sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used. | 44| 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).| 45| padding-[left\|top\|right\|bottom] | <length> | 0 | No| Left, top, right, and bottom padding.| 46| 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).| 47| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No| Left, top, right, and bottom margins.| 48| border-width | <length> | 0 | No| Shorthand attribute to set the margin for all sides.| 49| border-color | <color> | black | No| Shorthand attribute to set the color for all borders.| 50| border-radius | <length> | - | No| Radius of round-corner borders.| 51| background-color | <color> | - | No| Background color.| 52| 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.| 53| 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| 54| [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. | 55 56 57## Methods 58 59| Name| Parameter| Description| 60| -------- | -------- | -------- | 61| scrollTo | { index: number(position) } | Scrolls the list to the position of the item at the specified index.| 62 63 64## Example 65 66 67```html 68<!-- index.hml --> 69<div class="container"> 70 <list class="todo-wraper"> 71 <list-item for="{{todolist}}" class="todo-item"> 72 <text class="todo-title">{{$item.title}}</text> 73 <text class="todo-title">{{$item.date}}</text> 74 </list-item> 75 </list> 76</div> 77``` 78 79 80```js 81// index.js 82export default { 83 data: { 84 todolist: [{ 85 title: 'Prepare for the interview', 86 date: '2021-12-31 10:00:00', 87 }, { 88 title: 'Watch the movie', 89 date: '2021-12-31 20:00:00', 90 }], 91 }, 92} 93``` 94 95 96```css 97/* index.css */ 98.container { 99 display: flex; 100 justify-content: center; 101 align-items: center; 102 left: 0px; 103 top: 0px; 104 width: 454px; 105 height: 454px; 106} 107.todo-wraper { 108 width: 454px; 109 height: 300px; 110} 111.todo-item { 112 width: 454px; 113 height: 80px; 114 flex-direction: column; 115} 116.todo-title { 117 width: 454px; 118 height: 40px; 119 text-align: center; 120} 121``` 122 123 124
