Basic usage:
<input color-picker
color-picker-model="var"/>
Changing background color:
<input color-picker
color-picker-model="var"
ng-style="{background:var}"/>
Output format:
<input color-picker
color-picker-model="var"
color-picker-output-format="'rgba'"
ng-style="{background: var}"/>
Hiding output text color. When user introduces a value the output color is showed, use a no editable html element if you want to avoid this behaviour:
<input color-picker
color-picker-model="var"
color-picker-show-value="false"
ng-style="{background:var}"/>
You can change the color picker position,
<input color-picker
color-picker-model="var"
color-picker-position="bottom"
ng-style="{background:var}"/>
or put it in a fixed position:
<input color-picker
color-picker-model="var"
color-picker-fixed-position="true"
ng-style="{background:var}"/>
You can show input spinner and change the step:
<input color-picker
color-picker-model="var"
color-picker-show-input-spinner="true"
color-picker-spinner-rgba-steps="5;5;5;0.1"
color-picker-spinner-hsla-steps="5;5;5;0.1"
ng-style="{background:var}"/>
Cancel button:
<input color-picker
color-picker-model="var"
color-picker-show-cancel-button="true"
color-picker-cancel-button-class="btn btn-default btn-xs"
ng-style="{background:var}"/>
| Options | Values (default values in bold) |
|---|---|
| color-picker-model | Variable with the color value. |
| color-picker-show-value | true, false |
| color-picker-output-format |
'rgba', 'hsla', 'hex' Don't forget single quotes. Notice that you can use a variable to control output format, for example, to let users change output format from interface. |
| color-picker-position | right, left, top, bottom |
| color-picker-fixed-position | true, false |
| color-picker-show-input-spinner |
true, false With false value you can still change values with the cursor. |
| color-picker-spinner-rgba-steps | A semicolon separated list with the steps, default: 1;1;1;0.1 |
| color-picker-spinner-hsla-steps | A semicolon separated list with the steps, default: 1;1;1;0.1 |
| color-picker-show-cancel-button | true, false |
| color-picker-cancel-button-class | Your custom class for cancel button. |