更新记录

1.0.4（2023-09-06）

• 增加props参数 titleColor(标题字体颜色)

1.0.3（2023-07-07）

• 修改版本展示图效果

1.0.2（2023-07-07）

• 更改props变量 more 为 moreShow 含义不变
• 增加props变量 moreText (More展示文字)

平台兼容性

标题组件

组件名：h-title

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<!-- 全背景模式 -->

<!-- 基本用法 -->
<h-title title="基本用法" :cover="true" more></h-title>
<h-title title="基本用法" :cover="true" more color="#0079fe"></h-title>
<h-title title="基本用法" :cover="true" more color="#30b6a2"></h-title>

<!-- 标题颜色 -->
<h-title title="标题颜色" :cover="true" moreShow titleColor="#ffffff"></h-title>
<h-title title="标题颜色" :cover="true" moreShow color="#0079fe" titleColor="#ffffff"></h-title>
<h-title title="标题颜色" :cover="true" moreShow color="#30b6a2" titleColor="#ffffff"></h-title>

<!-- 有阴影 -->
<h-title title="有阴影" :cover="true" more boxShadow></h-title>
<h-title title="有阴影" :cover="true" more boxShadow color="#0079fe"></h-title>
<h-title title="有阴影" :cover="true" more boxShadow color="#30b6a2"></h-title>

<!-- 渐变背景 -->
<h-title title="渐变背景" :cover="true" more gradients></h-title>
<h-title title="渐变背景" :cover="true" more gradients color="#0079fe"></h-title>
<h-title title="渐变背景" :cover="true" more gradients color="#30b6a2"></h-title>

<!-- 渐变背景 + 阴影 -->
<h-title title="渐变背景 + 阴影" :cover="true" more gradients boxShadow></h-title>
<h-title title="渐变背景 + 阴影" :cover="true" more gradients boxShadow color="#0079fe"></h-title>
<h-title title="渐变背景 + 阴影" :cover="true" more gradients boxShadow color="#30b6a2"></h-title>

<!-- 标题模式 -->

<!-- 自定义标题 -->
<h-title title="标题名称"></h-title>
<!-- 自定义标题字体颜色 -->
<h-title title="标题字体颜色" titleColor="red"></h-title>
<!-- 自定义主题颜色 -->
<h-title title="主题颜色" color="#0079fe"></h-title>
<h-title title="主题颜色" color="#30b6a2"></h-title>
<!-- 自定义字体大小 -->
<h-title title="字体大小" size="32rpx"></h-title>
<!-- 自定义More展示文字 -->
<h-title title="More文字" moreText="更多"></h-title>
<!-- 是否存在More -->
<h-title title="无More" more></h-title>

组件中图标使用了自己的h-icon 组件，小程序不支持网络链接，使用时需要下载自己的图标库，使用本地地址；h-icon文档链接：https://ext.dcloud.net.cn/plugin?id=13216

API

Props

Events