Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
org.webjars.bowergithub.zhangbobell:color-picker
Advanced tools
点击这里查看 demo
你可以直接下载 dist 目录里的 css 和 js 使用,比较快捷的方式是直接安装 bower 包:先安装 bower,然后运行 bower install color-picker
;
color-picker 基于 angular,
用法示例:
<link rel="stylesheet" href="path/to/color-picker.min.css">
<script src="path/to/angular.js"></script>
<script src="path/to/color-picker.min.js"></script>
<!-- directive 的方式 -->
<font-color></font-color>
<!-- controller 的方式 -->
<div ng-controller="demoCtrl">
<div color-picker set-color="dynamicSetColor()" class="font-color" ng-style="{'background-color': selectedForeColor}"></div>
</div>
<script>
var myApp = angular.module('colorpickerDemo', ['ui.colorpicker']);
// directive 的方式
myApp.directive('fontColor', function() {
return {
restrict: 'E',
scope:{},
replace: false,
template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
link: function(scope) {
scope.selectedFontColor = '#f00';
scope.$on('colorPicked', function(event, color) {
scope.selectedFontColor = color;
});
}
}
})
// controller 的方式
myApp.controller('demoCtrl', function($scope) {
$scope.selectedForeColor = dynamicSetColor();
$scope.$on('colorPicked', function(event, color) {
$scope.selectedForeColor = color;
});
// 动态设置默认颜色
$scope.dynamicSetColor = dynamicSetColor;
function dynamicSetColor() {
return '#0f0';
}
});
</script>
默认语言为简体中文(zh-cn
), 目前还提供英语美国(en-us
)的配置选项你可以通过如下方法配置默认语言:
angular.module('colorpickerDemo', ['ui.colorpicker'])
.config(function (localizeProvider) {
localizeProvider.setDefaultLang('en-us');
})
语言文件源文件在 src/lang.service.js
里面, 欢迎提供更多语言的版本, 提 Pull Request 即可.
你可以通过在所在的元素上设置以下属性来配置 color-picker
default-color
: 默认的颜色,如 default-color="#ff0000"
disabled
: 是否可用,如 disabled="disabled"
set-color
: 动态设置默认颜色函数,以达到不同的上下文环境具有不同的默认颜色。
如 set-color="dynamicSet()"
,则 dynamicSet
函数是可以根据上下文而设置的颜色。colorPicked
-- 在用户选择了颜色的时候触发,在 color-picker 的父 scope 里面都可以监听到,带有一个参数 color
(用户选择的颜色值)
FAQs
WebJar for color-picker
We found that org.webjars.bowergithub.zhangbobell:color-picker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.