<input type="text" id="minicolors-hue" class="form-control" value="#ff6161">
<script>
$(function() {
$('#minicolors-hue').minicolors({
control: 'hue',
position: 'bottom left',
});
});
</script>
Copy<input type="text" id="minicolors-saturation" class="form-control" value="#0088cc">
<script>
$(function() {
$('#minicolors-saturation').minicolors({
control: 'saturation',
position: 'bottom right',
});
});
</script>
Copy<input type="text" id="minicolors-wheel" class="form-control" value="#ff99ee">
<script>
$(function() {
$('#minicolors-wheel').minicolors({
control: 'wheel',
position: 'top right',
});
});
</script>
Copy<input type="text" id="minicolors-opacity" class="form-control" value="#766fa8" data-opacity=".5">
<script>
$(function() {
$('#minicolors-opacity').minicolors({
control: 'wheel',
opacity: true,
});
});
</script>
Copy<input type="text" id="minicolors-brightness" class="form-control" value="#00ffff">
<script>
$(function() {
$('#minicolors-brightness').minicolors({
control: 'brightness',
position: 'top left',
});
});
</script>
Copy<input type="hidden" id="minicolors-hidden" class="form-control" value="#db913d">
<script>
$(function() {
$('#minicolors-hidden').minicolors();
});
</script>
Copy<input type="text" id="minicolors-sm-left" class="form-control input-sm" value="#ff6161" data-opacity=".5">
<br>
<input type="text" id="minicolors-sm-right" class="form-control input-sm" value="#00ffff" data-opacity=".5">
<br>
<input type="hidden" id="minicolors-sm-inline" class="form-control input-sm" value="#766fa8">
<script>
$(function() {
$('#minicolors-sm-left').minicolors({
opacity: true,
});
$('#minicolors-sm-right').minicolors({
opacity: true,
position: 'top right',
});
$('#minicolors-sm-inline').minicolors();
});
</script>
Copy<input type="text" id="minicolors-lg-left" class="form-control input-lg" value="#ff6161" data-opacity=".5">
<br>
<input type="text" id="minicolors-lg-right" class="form-control input-lg" value="#00ffff" data-opacity=".5">
<br>
<input type="hidden" id="minicolors-lg-inline" class="form-control input-lg" value="#766fa8">
<script>
$(function() {
$('#minicolors-lg-left').minicolors({
opacity: true,
});
$('#minicolors-lg-right').minicolors({
opacity: true,
position: 'top right',
});
$('#minicolors-lg-inline').minicolors();
});
</script>
Copyrequire(['jquery', 'px-libs/jquery.minicolors'], function($) {
...
});
To use minicolors plugin, you need to include the next scripts:
<script src="path/to/js/libs/jquery.minicolors.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-minicolors.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['minicolors']);
Alternatively, you can include minicolors plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'minicolors',
files: [
'path/to/js/libs/jquery.minicolors.js',
'path/to/js/pixeladmin/directives/angular-minicolors.js',
],
},
]);
minicolors
directivecolor
attribute to be on the element.
You can use minicolors
directive where you want.
And when the scope is destroyed the directive will be destroyed.
<div ng-app="ngMinicolorsApp" ng-controller="ngMinicolorsAppCtrl as ctrl">
<input minicolors color="ctrl.color" control="'hue'" position="'bottom left'" type="text" class="form-control">
<br>
<input minicolors color="ctrl.rgbColor" format="'rgb'" opacity="true" control="'wheel'" type="text" class="form-control">
<br>
<div minicolors color="ctrl.color" inline="true"></div>
</div>
<!-- Load scripts -->
<!-- <script src="assets/js/angular/libs/jquery.minicolors.js"></script> -->
<script src="assets/js/angular/pixeladmin/directives/angular-minicolors.js"></script>
<script>
angular.module('ngMinicolorsApp', [ 'minicolors' ])
.controller('ngMinicolorsAppCtrl', function() {
this.color = {
value: '#ff6161',
};
this.rgbColor = {
value: 'rgba(97, 217, 90, 0.7)',
opacity: 0.7,
};
});
</script>
Copy
You can define instance
attribute to get a pointer to minicolors element:
<input minicolors instance="ctrl.$minicolors" color="someColor" type="text" class="form-control">
function SomeController() {
// Pointer
this.$minicolors = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$minicolors('value', { color: '#000', opacity: 0.2 });
this.$minicolors('rgbaString');
});
minicolors' options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.
<input minicolors color="someColor" type="text" class="form-control"
control="'hue'"
change-delay="200"
inline="false">
Event handlers can be bound using attributes (see the plugin's documentation):
<input minicolors color="someColor" type="text" class="form-control"
on-change="ctrl.change"
on-hide="ctrl.hide"
on-show="ctrl.show">
function SomeController() {
this.change = function() { ... };
this.hide = function() { ... };
this.show = function() { ... };
});