标题 ui-title
标题组件可以快速构建一个等级标题。包含多种样式。
"usingComponents": {
"ui-title": "mp-cu/colorUI/components/ui-title/ui-title"
}
默认
<ui-title title="标题"/>
副标题
<ui-title title="标题" desc="副标题"/>
显示图标
<ui-title title="基础" desc="basic" isIcon/>
自定义图标
<ui-title title="自定义图标" desc="icon">
<text slot="icon" class="text-red cicon-whatshot"/>
</ui-title>
等级
不同等级字号、上下边距、默认的图标会不一样。 depth="{1~4}"
<ui-title title="等级一" desc="等级一" isIcon depth="1"/>
<ui-title title="等级二" desc="等级二" isIcon depth="2"/>
<ui-title title="等级三" desc="等级三" isIcon depth="3"/>
<ui-title title="等级四" desc="等级四" isIcon depth="4"/>
特殊标记
圆点 hasDot="true" ， 短线 hasLine="true"
<ui-title title="圆点" desc="dot" hasDot/>
<ui-title title="短线" desc="line" hasLine/>
内容对齐
内容对齐 align="{left / center / right}"
<ui-title title="基础" desc="basic" align="left"/>
<ui-title title="圆点" desc="dot" align="center" hasDot/>
<ui-title title="短线" desc="line" align="right" hasLine/>
特殊模板
tpl="stack" hasDot
<ui-title title="精选推荐" titleColor="text-blue" descUi="text-cyan" desc="Carefully chosen" tpl="stack" hasDot/>
tpl="stack" hasLine
<ui-title title="精选推荐" titleColor="text-blue" descUi="text-cyan" desc="Carefully chosen" tpl="stack" hasLine/>
tpl="center-column" hasDot
<ui-title title="精选推荐" titleColor="text-blue" descUi="text-cyan" desc="Carefully chosen" tpl="center-column" hasDot/>
<ui-title title="精选推荐" titleColor="text-blue" tpl="center-column" hasDot/>
tpl="center-column" hasLine
<ui-title title="猜你喜欢" titleColor="text-red" descUi="text-orange" desc="Guess you like" tpl="center-column" hasLine/>
<ui-title title="猜你喜欢" titleColor="text-red" tpl="center-column" hasLine/>
参数
| 参数 | 类型 | 可选值 | 默认值 | 说明 |
|---|---|---|---|---|
| ui | String | - | - | 其他class |
| bg | String | - | bg-none | 背景颜色 |
| title | String | - | - | 标题名称 |
| desc | String | - | - | 副标题 |
| titleUi | String | - | ui-TC | 标题class |
| descUi | String | - | ui-TC-3 | 副标题class |
| depth | Number/String | 1 ~ 4 | 0 | 等级字号 |
| dot | String | - | ui-BG-Main | dot的class |
| line | String | - | ui-BG-Main | line的class |
| isIcon | Boolean | - | false | 显示图标 |
| hasDot | Boolean | - | false | 圆点 |
| hasLine | Boolean | - | false | 短线 |
| align | String | left, center, right | left | 内容对齐 |
| tpl | String | - | default | 特殊模板 |
| inLine | Boolean | - | false | 线 |
插槽
| 参数 | 说明 |
|---|---|
| 默认 | 标题区的内容 |
| icon | 自定义图标 |
| more | 更多内容 |
