LuLu UI组件中文文档 » 组件颜色

组件颜色

一、颜色(文字、按钮)

LuLu ui组件使用的颜色预览,想要改变组件配色,可以在修改variable.sass中的颜色变量值,自动全局替换。

深色

#4c5161

浅色

#f7f9fa

灰色

#a2a9b6

蓝色

#2486ff

深蓝色

#0057c3

红色

#f4615c

橘色

#f28c48

绿色

#01cf97

二、控制文字的颜色

如果有引入下面的CSS:

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/color.css">

则可以直接使用下面高亮的类名显示颜色:

<span class="dark">主色(深色)</span>
<span class="light">浅色</span>
<span class="gray">灰色(主色灰)</span>
<span class="blue">蓝色</span>
<span class="red">红色</span>
<span class="orange">橘色</span>
<span class="green">绿色</span>
<span class="grey">灰色(边框灰)</span>
<span class="white">白色</span>

其中blue是默认的文字链接色,而深蓝色则是hover的颜色,其他情况,此深蓝色并不出现。

<a href>文字链接</a>

文字链接

有些链接文字默认是主色,则hover时候自动会变成blue蓝色。

<a href class="dark">文字链接默认主色</a>

文字链接默认主色

其他颜色如red, green可以出现在表示状态的静态描述文字上。例如:

<span class="red">审核没有通过</span>
<span class="green">审核成功</span>

审核没有通过
审核成功

Fork Me 返回顶部