# 支持的子组件类型
以[图1]为例，该模板的预览视图由image、text、button三个子组件拼接而成。目前KooMessage的智能短信模板已支持11种类型的子组件开发，详见[表1]。对于各类型子组件，[子组件代码示例](https://support.huaweicloud.com/devg-koomessage/dg004_3.html)提供了相应的HTML、CSS、JavaScript代码段供参考，部分组件无需编写CSS样式和JavaScript逻辑，请您以实际使用框架和组件库为准。
图1渲染出的模板预览视图   
![](https://support.huaweicloud.com/devg-koomessage/zh-cn_image_0000001416662466.png)
 表1支持的组件类型和判断条件 
| **组件类型** | **对应的判断条件**                  | **对应的自定义组件**              |
|:---|:---|:---|
| 文本       | item.type === 'text'         | app-preview-text          |
| 按钮       | item.type === 'button'       | app-preview-button        |
| 图片       | item.type === 'image'        | app-preview-image         |
| 视频       | item.type === 'video'        | app-preview-video         |
| 横滑       | item.type === 'sideslip'     | app-preview-sideslip      |
| 轮播       | item.type === 'swiper'       | app-preview-swiper        |
| 电商       | item.type === 'eCommerce'    | app-preview-ecommerce     |
| 卡券1      | item.type === 'cardVoucher'  | app-preview-card-voucher  |
| 卡券2      | item.type === 'cardVouchers' | app-preview-card-vouchers |
| 多商品      | item.type === 'moreGoods'    | app-preview-moreGoods     |
| 增强机票     | item.type === 'ticketImage'  | app-preview-ticketImage   |