angular2 改造 primeng colorpicker 控件

于 2020-04-09 17:56:43 发布
阅读量398 收藏
点赞数
分类专栏： angular typescript primeng 文章标签： angular2 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xhydongda/article/details/105415288
版权
typescript 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
angular
7 篇文章 0 订阅
订阅专栏
primeng
5 篇文章 0 订阅
订阅专栏

功能目标：

    改造primeng的colorpicker组件，增加RGB/HSB/HEX三种编辑模式、最近用过的颜色、常用颜色功能，并提供按钮仅在点击【应用】的情况下更新。

    改造前后的功能对比如下图所示。#ff0080 为HEX编辑区，RGB/HSB用来切换下方R(H)、G(S)、B三个输入框的label。再下方12个格为最近使用过的颜色，接着是10×12常用颜色，最后是【取消】、应用【按钮】。

改造前                 改造后   

代码：https://github.com/xhydongda/colorpicker

ironinfo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
colorpicker4angular:ColorPicker是Angular框架的一种简单的选色弹出控件，它以标准CSS十六进制或RGB格式将颜色值的输入实现为字符串。 您可以通过单击一个彩色区域以选择一种颜色来与ColorPicker进行交互
03-27
colorpicker4angular ColorPicker是Angular框架的一种简单的颜色选择弹出控件，它以标准CSS十六进制或rgb格式将颜色值的输入实现为字符串。 您可以通过单击彩色区域以选择颜色来与ColorPicker进行交互。
Ionic3/angular4 颜色选择器
weixin_33744141的博客
08-29 931
通过h5 canvas实现颜色选择器封装颜色选择器组件 color-picker A、color-picker.component.html <div [ngStyle]="{'position': 'relative', 'height': height+'px', 'overflow': 'hidden'}"> ...
ngx-color-picker angular4封装颜色选择器组件
weixin_34327761的博客
05-08 2283
先上效果图 1、安装插件 npm install ngx-color-picker --save 2、配置插件 import { ColorPickerModule } from 'ngx-color-picker'; @NgModule({ ... imports: [ ... ColorPickerModu...
Primeng中一些组件的格式调整以及css设置
Taylover-Cam的博客
09-03 6328
个人觉得primeng提供了很多比较好看的组件，包括输入框input、表格table、按钮button、交互框dialog等等，样式要比angular material好看一些，也比较好上手，官网提供了很多示例代码以及参数的使用说明。 但是某些组件的元素样式说明可能没有很直接，所以想开这篇文章，介绍一下我在使用其中一些组件时遇到的问题，以及对应的解决方案，包括一些内部元素的css设置。 m...
Angular2-primeNG文件上传模块FileUpload使用详解
08-31
主要为大家详细介绍了Angular2-primeNG文件上传模块FileUpload使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最棒的Angular2表格控件
09-01
最好的Angular2表格控件，满足更小、更快、更熟悉的基本要求，感兴趣的小伙伴们可以参考一下
Angular2 PrimeNG分页模块学习
08-31
主要为大家详细介绍了Angular2 PrimeNG分页模块学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详解支持Angular 2的表格控件
08-31
本文主要对支持Angular2的表格控件进行详细介绍。具有一定的参考价值，下面跟着小编一起来看下吧
ngx-color-picker:Angular的颜色选择器小部件（版本2和更高版本）
05-14
角度选色器 这是一个简单的拾色器，基于Alberplz的出色的angular2选色器。 本文档适用于需要Angular 5或更高版本的最新版本。 对于Angular 4，您需要使用最新的4.xx版本。 可以从找到4.xx的文档。 快速链接 | 建立图书馆 npm install npm run build 运行示例 npm install npm run start 安装和使用 npm install ngx-color-picker --save 为您的应用加载模块： import { ColorPickerModule } from 'ngx-color-picker' ; @ NgModule ( { ... imports : [ ... ColorPickerModule ] } ) 在您HTML模板中使用它： < input [(colorP
ngx-color-picker:纯Angular颜色选择器库
05-06
ngx-color-picker 纯粹的Angular颜色选择器库。 演示版 更详细的说明可以在找到 描述 这是一个有角度的颜色选择器 兼容Angular 5+版本 无外部依赖 易于配置 易于使用 经过测试 Firefox（最新） 镀Chrome（最新） Chrome（最新） 边缘 IE11 安装/入门 npm install @iplab/ngx-color-picker --save 在您的应用模块内使用以下代码段： import { ColorPickerModule } from ' @iplab/ngx-color-picker ' ; import { BrowserAnimationsModule } from ' @angular/platform-browser/animations ' ; ... ... @NgModule({ imports: [
颜色选择器AngularColorpicker.zip
07-18
color-picker 基于 AngularJS 开发，简单易用，功能强大，适合在基于 AngularJS 的 Web 应用中使用。截图： 特点： 简单易用，UI 和 Microsoft Word 2013 的拾色器一样；  增加了「最近使用」的功能；  在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能 更多信息，请转至项目主页 标签：Angular
angularColorPicker:轻量级颜色派克
06-05
角度颜色选择器 轻量级颜色派克 运行： sudo npm install 、 gulp或gulp minify 。
angular-bootstrap-colorpicker-2.0.zip
11-12
angular-bootstrap-colorpicker-2.0.zip 颜色选择器，
前端项目-angularjs-color-picker.zip
09-03
前端项目-angularjs-color-picker,Color Picker Directive For AngularJS
angular-bootstrap-colorpicker
03-20
如果浏览器调试里缺少bootstrap-colorpicker-module.min.js或colorpicker.min.css可以下载这个压缩包，这个包含了angular-bootstrap-colorpicker里所有的东西，我只用到了前面提的两个，测试可以使用，注意引入的路径是否正确！
angular-spectrum-colorpicker, 基于频谱的AngularJS颜色选取器.zip
10-10
angular-spectrum-colorpicker, 基于频谱的AngularJS颜色选取器 Angular 频谱 Colorpicker Angularified 光谱颜色选取器模块基于光谱颜色选择器插件，可以通过依赖注入嵌入任意项目：var myApp = angular.module('myApp',
ColorPicker 颜色选择器依赖库
10-26
ColorPicker.dll 一个简单颜色选择器的外部依赖库文件，实现代码参考网址：https://blog.csdn.net/BYH371256/article/details/83409995
颜色拾取器(color_pick,color-pick)
10-22
颜色拾取器,颜色拾取器,
angular中组件可以使用控件吗，使用控件如何导入
最新发布
06-07
是的，在Angular中，组件可以使用控件。控件是一些可重用的UI元素，如输入框、下拉菜单等。要使用控件，需要在组件中导入相应的控件模块。 例如，要使用Angular Material中的输入框控件，需要在组件中导入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值