标题 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/>

参数

参数类型可选值默认值说明
uiString--其他class
bgString-bg-none背景颜色
titleString--标题名称
descString--副标题
titleUiString-ui-TC标题class
descUiString-ui-TC-3副标题class
depthNumber/String1 ~ 40等级字号
dotString-ui-BG-Maindot的class
lineString-ui-BG-Mainline的class
isIconBoolean-false显示图标
hasDotBoolean-false圆点
hasLineBoolean-false短线
alignStringleft, center, rightleft内容对齐
tplString-default特殊模板
inLineBoolean-false线

插槽

参数说明
默认标题区的内容
icon自定义图标
more更多内容

mp-cu

上次更新: