md-rainbow
Version:
Continuation of md-color-picker.
117 lines (92 loc) • 4.98 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<link rel="stylesheet" href="demo/css/style.css" />
<link rel="stylesheet" href="dist/mdRainbow.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-content layout-padding layout="row">
<div flex>
<h3>Angular md-color-picker</h3>
<h5>*** BETA ***</h5>
<p style="margin-bottom: 5px;">A pop up color chooser featuring:</p>
<ul>
<li>HSL Specturm</li>
<li>RGBA Sliders</li>
<li>Palette Selection</li>
<li>$cookie based history</li>
<li>Multiple output formats</li>
</ul>
<h5>Spectrum Selector</h5>
<p>Canvas based spectrum selection tool, no images or tricky css.</p>
<h5>RGBA Sliders</h5>
<p>Angular Material sliders and manual input.</p>
<h5>$cookie Based History</h5>
<p>If <code>$cookies</code> is not included in your app, the history function will fall back to an array based history that is reset on each reload.</p>
<h5>Multiple Output Formats</h5>
<p>Using <a href="https://github.com/bgrins/TinyColor">tinycolor.js</a> we can output hexadecimal, rgb(a), or hsl(a) formats.</p>
<h5>Misc.</h5>
<ul>
<li>Random Color on open (optional)</li>
<li>Input focus opens color chooser (optional)</li>
<li>Default color on open (optional)</li>
<li>Specify output type</li>
<li>Accepts label and icon for use in the generated <code>md-input-container</code></li>
</ul>
</div>
<div layout="column" layout-margin flex="40">
<h2>Demo</h2>
<h4>*** Text Color ***</h4>
<p>The text color field is not using the <code>openOnInput</code> attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.</p>
<p>This field has a label and icon specified.</p>
<h4>*** Text Background ***</h4>
<p>The text background field is using the <code>openOnInput</code> and the <code>random</code> attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.</p>
<p>This field only has the label specified.</p>
<h4>Text Style</h4>
<md-input-container>
<label>Font</label>
<md-select ng-model="textConfig.font" aria-label="Font Family">
<md-option ng-repeat="font in textConfig.fonts" ng-style="{'font-family':font}">{{font}}</md-option>
</md-select>
</md-input-container>
<div layout="row">
<div md-color-picker ng-model="textConfig.textColor" md-color-preview flex></div>
</div>
<div layout="row">
<div flex
md-color-picker="textConfig.backgroundOptions"
ng-model="textConfig.textBackground"
md-color-history="true"
md-color-alpha-channel="true"
></div>
</div>
<div>
<h5>Text Preview</h5>
<div class="md-color-picker-checkered-bg" layout="row" layout-align="center center">
<div class="text-preview" ng-style="{'background-color': textConfig.textBackground, 'color': textConfig.textColor, 'font-family': textConfig.font}" style="width: 100%; height: 100%;" layout="row" layout-align="center center" layout-padding>
The five boxing wizards jump quickly.
</div>
</div>
</div>
</div>
<span flex="10"></span>
</md-content>
<script src="demo/lib/tinycolor/dist/tinycolor-min.js"></script>
<!-- Angular Material Dependencies -->
<script src="demo/lib/angular/angular.min.js"></script>
<script src="demo/lib/angular-animate/angular-animate.min.js"></script>
<script src="demo/lib/angular-aria/angular-aria.min.js"></script>
<script src="demo/lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="demo/lib/angular-material/angular-material.min.js"></script>
<!-- Custom Scripts -->
<script src="dist/mdRainbow.min.js"></script>
<script src="demo/js/app.js"></script>
</body>
</html>