组件换肤说明

换肤是什么

目前SUI的所有组件都有一个主色,这个主色同时也是链接色。在 variables-base.less 文件中定义了如下两个变量:

这两个颜色大多数组件使用,通过修改这两个变量并重新编译,即可实现换肤。点击右上角的换肤按钮,可以在组件库中预览每种内置皮肤的效果。

千牛中如何使用换肤

千牛中默认的换肤只能更换窗口标题和工具栏,如果使用了 QNUI 的代码之后,当用户点击换肤的时候会自动加载对应的皮肤文件。所以 QNUI 所有的组件默认就是支持换肤功能的,不需要做额外的设置。

但是有一个前提条件就是CSS必须引用的是线上 cdn 的地址,如果是下载到本地再使用,因为千牛客户端没有检测本地文件所以无法实现换肤。

非千牛客户端如何使用换肤功能

通过引用不同的css文件既可以轻松实现换肤功能。目前内置了四套不同颜色的皮肤,分别是:

注意,换肤功能从版本 1.1.1 开始支持,低于 1.1.1 的版本没有内置皮肤。

从 1.4.0 版本开始,部分不常用组件被移入了一个单独的 *-append.css 文件中,比如新手引导。如果你使用了新手引导,那么你需要再引入一个对应的 append 文件,比如你引入了 http://g.alicdn.com/sj/qnui/1.5.1/css/sui-themes-pink.min.css,那么你还需要引入 http://g.alicdn.com/sj/qnui/1.5.1/css/sui-themes-pink-append.min.css 。

注意,皮肤文件包含了全部的样式,而不仅仅是换肤相关的样式,所以引入皮肤文件之后是不需要引入 sui.min.css 文件的。

制作自己的皮肤

如果现有的皮肤不能满足需求,可以clone源码之后制作自己的皮肤。制作方法非常简单,直接修改 @linkColor@linkHoverColor 并编译less即可。如果还希望保留默认的皮肤,可以参考 sui-themes-pink.less 的写法,复制一份文件为 sui-themes-xxx.less,修改其中的颜色变量并编译即可。