weui
微信UI好像一直都不受不少人待见的样子,Github 已经长期未获得更新,或许 weui
团队认为已经没有必要再作一些新组件的支持,或者其余的改进。git
可是对于咱们这类依赖微信较重企业而言,常常须要一些临时业务状况下,weui
是咱们很是好的选择。github
ngx-weui
是 weui
的 Angular 版本,一直都很受你们欢迎,虽然人数不多。同时对其维护也没有中止过,基础组件几乎能够知足大部分场景,受精力限制一直特想增长一些业务类组件来知足一些通用场景。npm
这次发布 3.0.0
主要是针对自定义主题更新,weui
是由 Less 编写的,而且有数十种变量参数,而且利用定制化这些参数来自定义本身的品牌视觉。json
默认 ngx-weui
并无强制依赖 weui
,这是由于在某些特殊场景下可能会因为 package.json
的入口关系致使失败。所以在使用样式以前必须先安装 weui
依赖包:bash
npm i --save weui
最后,在项目 styles.less
里加入 weui
和 ngx-weui
样式:微信
@import '~weui/src/style/weui.less'; @import '~ngx-weui/index';
若你想改变字体和主按钮的背景色为红色:less
@import '~weui/src/style/weui.less'; @import '~ngx-weui/index'; @weuiFontDefault: "Helvetica Neue"; @weuiBtnPrimaryBg: #f50;
weui
包含着几十种参数这些参数你能够经过 variable 目录下得到,每个文件分布都很是简单明了。字体
ngx-weui
也包含十几种参数,这些包括:ui
名称 | 默认值 | 描述 |
---|---|---|
@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 背景色 |
(完)code