metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
89 lines (79 loc) • 3.39 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test ColorSelector - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
.target {
height: 100px;
width: 306px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid gray;
margin-top: 10px;
}
</style>
</head>
<body class="m4-cloak h-vh-100">
<div class="container h-100 d-flex flex-column flex-justify-start flex-align-center">
<div class="mt-10 mb-10">
<button class="button" onclick="Metro.getPlugin('#color-selector-1', 'color-selector').val('#aa00ff')">Set to Violet</button>
<button class="button" onclick="alert(Metro.getPlugin('#color-selector-1', 'color-selector').val())">Get color</button>
<button class="button" onclick="Metro.getPlugin('#color-selector-1', 'color-selector').user('#aa00ff, #ff00ff')">Set user colors</button>
<button class="button" onclick="alert(Metro.getPlugin('#color-selector-1', 'color-selector').user().join(','))">Get user colors</button>
<button class="button" onclick="createMaterialPalette()">Create material colors</button>
</div>
<div class="mb-10">
<input type="text" data-role="input" id="color-controller">
</div>
<div id="color-selector-1"
data-role="color-selector"
data-user-colors="#FFFFFF,#000000,#FFFB0D,#0532FF,#FF9300,#00F91A,#FF2700,#686868,#EE5464,#D27AEE,#5BA8C4,#E64AA9,#1ba1e2,#6a00ff,#bebebe,#f8f8f8"
data-show-as-string="rgb"
data-show-alpha-channel="true"
data-controller="#color-controller"
data-init-color="#9c27b0"
data-readonly-input="false"
class="win-shadow"></div>
<div class="mt-20 w-100">
<div class="row">
<div class="cell-md-12">
<div id="palette"></div>
</div>
<div class="cell-md-3">
<div id="grayscale"></div>
</div>
<div class="cell-md-3">
<div id="saturate"></div>
</div>
<div class="cell-md-3">
<div id="desaturate"></div>
</div>
</div>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
function createMaterialPalette(){
var color = Metro.getPlugin('@color-selector', 'color-selector').val();
var palette = Metro.colors.createScheme(color, "material");
var outputPalette = $("#palette").clear();
$.each(palette, function(key, color){
outputPalette.append($("<div style='height: 50px'>").addClass("text-center p-1").css("background-color", color).text(key + " : " + color));
})
}
$(function(){
createMaterialPalette();
// var outputPalette = $("#palette").clear();
// var colors = Metro.colors.tetradic("#f44336");
//
// $.each(colors, function(){
// outputPalette.append($("<div style='height: 50px'>").addClass("text-center p-1").css("background-color", this).text(this));
// })
})
</script>
</body>
</html>