1# list-item
2
3**\<list-item>** is a child component of the **[\<list>](js-lite-components-container-list.md)** component and is used to display items in a list.
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 | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component width.<br>If this attribute is not set, the default value **0** is used.|
39| height | &lt;length&gt; \| &lt;percentage&gt;<sup>5+</sup> | - | No| Component height.<br>If this attribute is not set, the default value **0** is used.|
40| padding | &lt;length&gt; | 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. - 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. - 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] | &lt;length&gt; | 0 | No| Left, top, right, and bottom padding.|
42| border-width | &lt;length&gt; | 0 | No| Shorthand attribute to set the margin for all sides.|
43| border-color | &lt;color&gt; | black | No| Shorthand attribute to set the color for all borders.|
44| border-radius | &lt;length&gt; | - | No| Radius of round-corner borders.|
45| background-color | &lt;color&gt; | - | No| Background color.|
46| 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.|
47| 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|
48
49
50
51## Example
52
53See **Example** in [list](js-lite-components-container-list.md).
54