zoukankan      html  css  js  c++  java
  • 通过iview-theme定制iView主题

    iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。项目搭建中,选用该组件库时,可按如下方法设计个性化主题。

    安装iview-theme

    npm i iview-theme -g
    

    安装iview

    npm i iview
    

    自定义主题变量

    进入./node_modules/iview/src/styles/index.less文件,自定义主题变量:

    主要设置两个变量(@primary-color 、@link-color),设置如下:

    如需设置更多的个性化主题,可以进入更多less文件查看详细变量,然后在index.less修改变量,覆盖变量生成新主题

    打包生成主题

    cd ./node_modules/iview/src/styles
    iview-theme build -o dist/
    

    生成主题压缩文件和字体

    其他建议

    1.主题的颜色主要体现在基础颜色、active状态颜色、链接颜色,项目中如果需要切换某些文本主题,建议在文本外部加一个空链接标签<a href="javascript:void(0)"></a>
    2.本文里链接了iview-theme的github地址,不过个人推荐按照本文中的方式生成主题,这样的版本是最新的iview版本,iview不同版本默认主题色不太一致,甚至class命名会有很大改变。

  • 相关阅读:
    基本Dos命令
    安装java开发环境
    windouws常用快捷键
    elasticsearch(ES)
    使用kibana操作elasticsearch(es)
    Dubbo的负载均衡
    springboot结合Dubbo的使用
    Dubbo
    zookeeper-理解
    springboot结合FTP服务器实现文件上传
  • 原文地址:https://www.cnblogs.com/haozehua/p/9117259.html
Copyright © 2011-2022 走看看