weui 微信UI好像一直都不受很多人待见的样子,Github 已经长期未得到更新,或许 weui 团队认为已经没有必要再做一些新组件的支持,或者其他的改进。
但是对于我们这类依赖微信较重企业而言,经常需要一些临时业务情况下,weui 是我们非常好的选择。
ngx-weui 是 weui 的 Angular 版本,一直都很受大家欢迎,虽然人数很少。同时对其维护也没有停止过,基础组件几乎可以满足大部分场景,受精力限制一直特想增加一些业务类组件来满足一些通用场景。
此次发布 3.0.0 主要是针对自定义主题更新,weui 是由 Less 编写的,并且有数十种变量参数,并且利用定制化这些参数来自定义自己的品牌视觉。
如何自定义主题
默认 ngx-weui 并没有强制依赖 weui ,这是因为在某些特殊场景下可能会由于 package.json 的入口关系导致失败。因此在使用样式之前必须先安装 weui 依赖包:
npm i --save weui
最后,在项目 styles.less 里加入 weui 和 ngx-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 包含着几十种参数这些参数你可以通过 variable 目录下获得,每一个文件分布都非常简单明了。
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 背景色 |
(完) (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|