# Component Overview<a name="EN-US_TOPIC_0000001063340551"></a>

-   [Classification](#section154381954142018)

Components are the core of a UI page. Each component can provide visible and interactive functional units that are independent from each other. This is achieved by data and method encapsulation. You can use and reuse any component anywhere as needed. 

## Classification<a name="section154381954142018"></a>

Components can be classified into the following types based on their functions.

<a name="table1566416553433"></a>
<table><thead align="left"><tr id="row466410559436"><th class="cellrowborder" valign="top" width="33.23%" id="mcps1.1.3.1.1"><p id="p1166485514432"><a name="p1166485514432"></a><a name="p1166485514432"></a>Component Type</p>
</th>
<th class="cellrowborder" valign="top" width="66.77%" id="mcps1.1.3.1.2"><p id="p146651555174320"><a name="p146651555174320"></a><a name="p146651555174320"></a>Components</p>
</th>
</tr>
</thead>
<tbody><tr id="row166525516430"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p116655558432"><a name="p116655558432"></a><a name="p116655558432"></a>Basic component</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p12145036194419"><a name="p12145036194419"></a><a name="p12145036194419"></a>text, image, progress, rating, span, marquee, image-animator, divider, search, menu, chart</p>
</td>
</tr>
<tr id="row10665555154310"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p1266535584311"><a name="p1266535584311"></a><a name="p1266535584311"></a>Container component</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p18127648144417"><a name="p18127648144417"></a><a name="p18127648144417"></a>div, list, list-item, stack, swiper, tabs, tab-bar, tab-content, list-item-group, refresh, dialog</p>
</td>
</tr>
<tr id="row3665175512436"><td class="cellrowborder" valign="top" width="33.23%" headers="mcps1.1.3.1.1 "><p id="p196651055164310"><a name="p196651055164310"></a><a name="p196651055164310"></a>Canvas component</p>
</td>
<td class="cellrowborder" valign="top" width="66.77%" headers="mcps1.1.3.1.2 "><p id="p066545564313"><a name="p066545564313"></a><a name="p066545564313"></a>canvas</p>
</td>
</tr>
</tbody>
</table>