微信小程序开发指南

基于ColorUI的组件化页面开发


文字大小

<h1>文字大小</h1> <ul> <li>样式图例</li> </ul> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=f5f9dec6ff8801ac6d58a01a478aec04&amp;file=file.png" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=298ad10d8570fefc52730a7bcfc3c126&amp;file=file.png" alt="" /></p> <ul> <li>示例代码</li> </ul> <pre><code class="language-html">&lt;view class="bg-white padding-lr"&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;60&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-xsl padding"&gt; &lt;text class=" cuIcon-roundcheckfill text-green"&gt;&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;用于图标、数字等特大显示&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;40&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-sl padding"&gt; &lt;text class=" cuIcon-roundcheckfill text-green"&gt;&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;用于图标、数字等较大显示&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;22&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-xxl padding"&gt; &lt;text class="text-price text-red"&gt;80.00&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;用于金额数字等信息&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;18&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-xl padding"&gt; &lt;text class="text-black text-bold"&gt;您的订单已提交成功!&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;页面大标题,用于结果页等单一信息页&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;16&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-lg padding"&gt; &lt;text class="text-black"&gt;ColorUI组件库&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;页面小标题,首要层级显示内容&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;14&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-df padding"&gt;专注视觉的小程序组件库&lt;/view&gt; &lt;view class="padding"&gt;页面默认字号,用于摘要或阅读文本&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="solids-bottom padding-xs flex align-center"&gt; &lt;view class="padding"&gt;12&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-sm padding"&gt; &lt;text class="text-grey"&gt;衬衫的价格是9磅15便士&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;页面辅助信息,次级内容等&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;view class="padding-xs flex align-center"&gt; &lt;view class="padding"&gt;10&lt;/view&gt; &lt;view class="flex-sub text-center"&gt; &lt;view class="solid-bottom text-xs padding"&gt; &lt;text class="text-gray"&gt;我于杀戮之中绽放 亦如黎明中的花朵&lt;/text&gt; &lt;/view&gt; &lt;view class="padding"&gt;说明文本,标签文字等关注度低的文字&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; &lt;/view&gt;</code></pre>

页面列表

ITEM_HTML