template.md

为方便开发者快速开发，DCloud在```Hello uni-app```示例中包含了部分模板演示，这部分模板源码已开源，详见[Github](https://github.com/dcloudio/uni-app/tree/master/examples/hello-uniapp/pages/template)。

下文列出已集成的模板示例，欢迎开发者分享更多的模板示例，一起完善```uni-app```生态！

**1.折叠面板**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-01.jpg" width="200"/>

**2.数字角标**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-02.jpg" width="200"/>

**3.卡片视图**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-03.jpg" width="200"/>

**4.列表**

包括右侧带角标、二级折叠列表、三行列表、图文列表

<div style="display:flex;justify-content: space-around;">
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-04.jpg" width="200"/>
	</div>
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-05.jpg" width="200"/>
	</div>
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-06.jpg" width="200"/>
	</div>
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-07.jpg" width="200"/>
	</div>
</div>

**5.九宫格**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-08.jpg" width="200"/>

**6.选项卡**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-09.jpg" width="200"/>

**7.数字选择框**

<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-10.jpg" width="200"/>

**8.资讯类列表到详情示例**

包括资讯类列表页及详情页

<div style="display:flex;justify-content: space-around;">
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-11.jpg" width="200"/>
	</div>
	<div style="display:flex;align-items: center;flex-direction: column;">
		<img src="//img.cdn.aliyun.dcloud.net.cn/guide/uniapp/template-12.jpg" width="200"/>
	</div>
</div>