Material Design Color Picker for AngularJS


Material Design Color Picker directive for AngularJS:

Material Design Color Picker

Color Picker

Latest codepen.io example.

Reference the ui bootstrap material Picker module

To use include the ui bootstrap material Picker.js file and add a reference to the ui.bootstrap.materialPicker module.

HTML – Only ng-model is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.

<color-picker
    ng-model=color
    options=options
    api=api
    event-api=eventApi
></color-picker>

Tag

<material-picker ng-model="color"></material-picker>
<material-picker ng-model="color" format="'hex'" size="10" hover-model="hoverColor" size="15"></material-picker>
Attribute Default values Required
ng-model n/a string, object true
hover-model n/a object false
format 'object' ‘object’, ‘hex’ false
size 15 5 to n false

CSS

The required CSS is below.

.materialpicker-colors {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    border: 1px solid #FFF;
    border-radius: 2px;
    display: inline-block;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    cursor: default;
}
.materialpicker-colors div.selected {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 4px #000;
    border: 2px solid #FFF;
}
div.materialpicker-white.selected {
    border-color: #78909C;
}
.materialpicker.ng-invalid .materialpicker-colors {
    border-color: #a94442;
    box-shadow: 0 1px 5px #a94442;
}

Format Object

$scope.color = {
  hex: '#990000',    Hex or RGB must be populated.
  r: 153,            Red 0-255
  g: 0,              Green 0-255
  b: 0,              Blue 0-255
  name: ''           Material Design Color Name or empty string
};

Leave a Reply

Your email address will not be published. Required fields are marked *