examples/01-simple.html
<html>
<head>
<title>Example 1 - Simple</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" href="../dist/angularjs-color-picker.min.css" />
<link rel="stylesheet" href="../dist/themes/angularjs-color-picker-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/tinycolor/dist/tinycolor-min.js"></script>
<!-- <script src="../src/scripts/module.js" type="module"></script> -->
<script src="../dist/angularjs-color-picker.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<div class="col-sm-12">
<h1>AngularJS Color Picker</h1>
<p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
<form class="col-sm-12">
<h3>Color</h3>
<div class="row">
<label class="control-label">Format (format)</label>
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
</div>
<div class="row">
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
</div>
<h3>Sliders</h3>
<div class="row">
<label class="control-label">Hue (hue) - whether or not to display the hue control</label>
<select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Dynamic Hue (dynamicHue) - whether or not to allow hue control to change based on color selection</label>
<select ng-model="options.dynamicHue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Saturation (saturation) - whether or not to display the saturation control</label>
<select ng-model="options.saturation" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Dynamic Saturation (dynamicSaturation) - whether or not to allow saturation control to change based on color selection</label>
<select ng-model="options.dynamicSaturation" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Lightness (lightness) - whether or not to display the lightness control</label>
<select ng-model="options.lightness" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Dynamic Lightness (dynamicLightness) - whether or not to allow lightness control to change based on color selection</label>
<select ng-model="options.dynamicLightness" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Dynamic Alpha (dynamicAlpha) - whether or not to allow alpha control to change based on color selection</label>
<select ng-model="options.dynamicAlpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<h3>Swatch</h3>
<div class="row">
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Swatch Only (swatch-only) - whether or not to display the input field</label>
<select ng-model="options.swatchOnly" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Swatch Position (swatch-pos) - the position of the swatch in the input field - 'left' or 'right'</label>
<select ng-model="options.swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
</div>
<div class="row">
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<h3>Popup</h3>
<div class="row">
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
</div>
<div class="row">
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Round (round) - whether or not to display the picker as a circle</label>
<select ng-model="options.round" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Horizontal (horizontal) - whether or not to display the hue, saturation, lightness, and opacity sliders horizontally below</label>
<select ng-model="options.horizontal" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<h3>Attributes</h3>
<div class="row">
<label class="control-label">Required (required)</label>
<select ng-model="options.required" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Disabled (disabled)</label>
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Placeholder (placeholder)</label>
<input type="text" ng-model="options.placeholder" placeholder="Placeholder" class="form-control" />
</div>
<div class="row">
<label class="control-label">ID (id)</label>
<input type="text" ng-model="options.id" placeholder="ID" class="form-control" />
</div>
<div class="row">
<label class="control-label">Name (name)</label>
<input type="text" ng-model="options.name" placeholder="Name" class="form-control" />
</div>
<div class="row">
<label class="control-label">Input Class (inputClass)</label>
<input type="text" ng-model="options.inputClass" placeholder="Input Class" class="form-control" />
</div>
<h3>Show/Hide</h3>
<div class="row">
<label class="control-label">Show Swatch (show.swatch) - whether or not to open when clicking the swatch - true, false</label>
<select ng-model="options.show.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Show Focus (show.focus) - whether or not to open when focusing on the input - true, false</label>
<select ng-model="options.show.focus" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Hide Blur (hide.blur) - whether or not to close when losing focus on the input - true, false</label>
<select ng-model="options.hide.blur" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Hide Escape (hide.escape) - whether or not to close when pressing the escape key - true, false</label>
<select ng-model="options.hide.escape" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Hide Click (hide.click) - whether or not to close when clicking outside the color picker - true, false</label>
<select ng-model="options.hide.click" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<h3>Buttons</h3>
<div class="row">
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Close Label (close.label) - The label of the close button - "Close"</label>
<input type="text" ng-model="options.close.label" placeholder="Close" class="form-control" />
</div>
<div class="row">
<label class="control-label">Close class (close.class) - The class of the close button - ""</label>
<input type="text" ng-model="options.close.class" placeholder="Class" class="form-control" />
</div>
<div class="row">
<label class="control-label">Clear Visible (clear.show) - whether or not to display the clear button - false, true</label>
<select ng-model="options.clear.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Clear Label (clear.label) - The label of the clear button - "Clear"</label>
<input type="text" ng-model="options.clear.label" placeholder="Clear" class="form-control" />
</div>
<div class="row">
<label class="control-label">Clear class (clear.class) - The class of the clear button - ""</label>
<input type="text" ng-model="options.clear.class" placeholder="Class" class="form-control" />
</div>
<div class="row">
<label class="control-label">Reset Visible (reset.show) - whether or not to display the reset button - false, true</label>
<select ng-model="options.reset.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Reset Label (reset.label) - The label of the reset button - "Reset"</label>
<input type="text" ng-model="options.reset.label" placeholder="Reset" class="form-control" />
</div>
<div class="row">
<label class="control-label">Reset class (reset.class) - The class of the reset button - ""</label>
<input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
</div>
<h3>Validation</h3>
<div class="row">
<label class="control-label">Restrict To Format (restrictToFormat) - whether or not to restrict typing of the color to the selected format</label>
<select ng-model="options.restrictToFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Preserve Input Format (preserveInputFormat) - whether or not a valid input color of a different format should change to the configured format</label>
<select ng-model="options.preserveInputFormat" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<div class="row">
<label class="control-label">Allow Empty (allowEmpty) - whether or not to allow empty values as valid</label>
<select ng-model="options.allowEmpty" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
</div>
<h3>Examples</h3>
<div class="row">
<label class="control-label">Color</label>
<button ng-click="open()">Show</button>
<button ng-click="close()">Hide</button>
<button ng-click="setValue('#FF0000')">Set value to #FF0000</button>
<color-picker
ng-model="color"
options="options"
api="api"
event-api="eventApi"
></color-picker>
</div>
<div class="row">
Two Way Binding
<!-- <color-picker ng-model="color"></color-picker> -->
{{color}}
</div>
<div class="row">
<h2>HTML Options</h2>
<label class="control-label">Color</label>
<color-picker class='col-sm-1' ng-model="color2" options="{'format':'hex', 'placeholder': 'Hello', 'round': false}"></color-picker>
</div>
<div class="row">
Two Way Binding
{{color2}}
</div>
<div class="row">
<h2>No Options</h2>
<label class="control-label">Color</label>
<color-picker class='col-sm-1' ng-model="color3"></color-picker>
</div>
<div class="row">
Two Way Binding
{{color3}}
</div>
</form>
</div>
</body>
</html>