layui 自定义皮肤
时间: 2023-09-21 16:10:33 浏览: 91
easyUI定制皮肤
LayUI 提供了丰富的预设皮肤,如果需要自定义皮肤,可以按照以下步骤进行:
1. 下载 LayUI 源码,解压缩到本地。
2. 在 `src/css/modules/` 目录下新建一个自定义皮肤的文件夹,例如 `my-skin`。
3. 在 `my-skin` 目录下新建一个 `my-skin.css` 文件,编写自定义皮肤的样式。
4. 在 `src/css/modules/` 目录下新建一个 `my-skin.js` 文件,内容如下:
```
layui.define(function(exports) {
var mySkin = {
css: '/src/css/modules/my-skin/my-skin.css',
name: 'my-skin'
};
exports('my-skin', mySkin);
});
```
5. 在页面中引入自定义皮肤的 CSS 文件和 `my-skin.js` 文件,例如:
```
<link rel="stylesheet" href="/src/css/modules/my-skin/my-skin.css">
<script src="/src/css/modules/my-skin/my-skin.js"></script>
```
6. 在 LayUI 的 `layuicss` 样式表中添加自定义皮肤的样式,例如:
```
.layui-layer[skin=my-skin] .layui-layer-title {
background-color: #393D49;
color: #fff;
}
```
7. 使用自定义皮肤,例如:
```
layer.open({
type: 1,
title: '自定义皮肤示例',
skin: 'my-skin',
content: '这是一个自定义皮肤的示例'
});
```
阅读全文