博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ngx-weui 发布 3.0 版本
阅读量:6244 次
发布时间:2019-06-22

本文共 1432 字,大约阅读时间需要 4 分钟。

weui 微信UI好像一直都不受很多人待见的样子,Github 已经长期未得到更新,或许 weui 团队认为已经没有必要再做一些新组件的支持,或者其他的改进。

但是对于我们这类依赖微信较重企业而言,经常需要一些临时业务情况下,weui 是我们非常好的选择。

ngx-weuiweui 的 Angular 版本,一直都很受大家欢迎,虽然人数很少。同时对其维护也没有停止过,基础组件几乎可以满足大部分场景,受精力限制一直特想增加一些业务类组件来满足一些通用场景。

此次发布 3.0.0 主要是针对自定义主题更新,weui 是由 Less 编写的,并且有数十种变量参数,并且利用定制化这些参数来自定义自己的品牌视觉。

如何自定义主题

默认 ngx-weui 并没有强制依赖 weui,这是因为在某些特殊场景下可能会由于 package.json 的入口关系导致失败。因此在使用样式之前必须先安装 weui 依赖包:

npm i --save weui

最后,在项目 styles.less 里加入 weuingx-weui 样式:

@import '~weui/src/style/weui.less';@import '~ngx-weui/index';

若你想改变字体和主按钮的背景色为红色:

@import '~weui/src/style/weui.less';@import '~ngx-weui/index';@weuiFontDefault: "Helvetica Neue";@weuiBtnPrimaryBg: #f50;

weui 包含着几十种参数这些参数你可以通过 目录下获得,每一个文件分布都非常简单明了。

ngx-weui 也包含十几种参数,这些包括:

名称 默认值 描述
@dialog-error-font-size 14px 对话框错误字号
@dialog-error-color #f50 对话框错误颜色
@pagination-dot-wh 8px 小点样式分页器大小
@pagination-dot-bg #ccc 小点样式分页器背景色
@pagination-dot-active-bg #888 小点样式分页器当前背景色
@popup-bg #efeff4 弹出视图背景色
@popup-head-bg #fbf9fe 弹出视图标题背景色
@popup-head-padding 10px 15px 弹出视图标题内边距
@popup-head-border-bottom-color #e5e5e5 弹出视图标题底部线条色
@popup-head-color #e5e5e5 弹出视图标题色
@popup-head-action-color #586c94 弹出视图标题按钮色
@stepper-wh 30px 步进器按钮宽高
@stepper-input-width 60px 步进器输入框宽度
@stepper-color rgb(134, 134, 134) 步进器按钮颜色
@stepper-font-size 20px 步进器文字大小
@toptips-bg-default #B2B2B2 弹出式提示 default 背景色
@toptips-bg-info #586C94 弹出式提示 info 背景色
@toptips-bg-primary #1AAD19 弹出式提示 primary 背景色

(完)

转载地址:http://lxpia.baihongyu.com/

你可能感兴趣的文章
LoadRunner12使用教程(二)——回放与录制
查看>>
工作收获点
查看>>
PhpStorm Terminal终端无法打开
查看>>
学习笔记TF036:实现Bidirectional LSTM Classifier
查看>>
应用监控预警&服务链路跟踪-Pinpoint介绍
查看>>
前端:后端,我要分手
查看>>
smarty isset 怎样使用
查看>>
用图帮你了解https的原理
查看>>
区块链如何改变AI
查看>>
HTML5/JavaScript UI控件Wijmo Enterprise 2018v2发布
查看>>
工业仪表盘控件Iocomp ActiveX常见问题(2):Visual Basic中的错误
查看>>
Docker下使用selenium+testng实现web自动化
查看>>
当执行npm时遇到的问题
查看>>
JAVA程序员面试30问(附带答案)
查看>>
Java性能调优攻略全分享,七步搞定!(附学习资料分享)
查看>>
企业级 SpringBoot 教程 (六)springboot整合mybatis
查看>>
程序员写了一段注释, 第二天惨被公司开除, 公司巧妙回怼
查看>>
8.eclipse 安装 lombook插件
查看>>
Maven项目中使用本地JAR包方案4
查看>>
如何利用XMind创建概念图
查看>>