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>
AttributeDefaultvaluesRequired
ng-modeln/astring, objecttrue
hover-modeln/aobjectfalse
format'object'‘object’, ‘hex’false
size155 to nfalse

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 *