1# 组件介绍 2 3组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。关于组件的详细参考文档请参见[组件](../reference/arkui-js/js-components-common-attributes.md)。 4 5 6开发者还可以通过组件间合理的搭配定义满足业务需求的新组件，减少开发量，自定义组件的开发方法请参见[自定义组件](../ui/ui-js-custom-components.md)。 7 8 9## 组件分类 10 11根据组件的功能，可以分为以下六大类： 12 13| 组件类型 | 主要组件 | 14| -------- | -------- | 15| 容器组件 | badge、dialog、div、form、list、list-item、list-item-group、panel、popup、refresh、stack、stepper、stepper-item、swiper、tabs、tab-bar、tab-content | 16| 基础组件 | button、chart、divider、image、image-animator、input、label、marquee、menu、option、picker、picker-view、piece、progress、qrcode、rating、richtext、search、select、slider、span、switch、text、textarea、toolbar、toolbar-item、toggle | 17| 媒体组件 | video | 18| 画布组件 | canvas | 19| 栅格组件 | grid-container、grid-row、grid-col | 20| svg组件 | svg、rect、circle、ellipse、path、line、polyline、polygon、text、tspan、textPath、animate、animateMotion、animateTransform | 21 22 23 24## 相关实例 25 26针对组件开发，有以下相关实例可供参考： 27 28- [`JsPanel`：内容展示面板（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsPanel) 29 30- [`Popup`：气泡（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/Popup) 31 32- [`RefreshContainer`：下拉刷新容器（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/RefreshContainer) 33 34- [`JSComponments`：Js组件（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JSComponments) 35 36- [`JsUserRegistration`：用户注册（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/JsUserRegistration) 37 38- [`Badge`：事件标记控件（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/UI/Badge) 39 40- [`JsVideo`：视频播放（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/media/JsVideo) 41 42- [rating（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication) 43 44- [简易视频播放器（JS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony) 45