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
66 lines (62 loc) • 2.53 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 mt-2">
<h1>ColorSelector test page</h1>
<div class="example">
<div class="row">
<div class="cell-md-6">
<div class="mb-2">
<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>
</div>
<div id="color-selector-1" data-role="color-selector"></div>
</div>
<div class="cell-md-6">
<div class="mb-2">
<button class="button" onclick="Metro.getPlugin('#color-selector-2', 'color-selector').user('#aa00ff, #ff00ff')">Set user colors</button>
<button class="button" onclick="alert(Metro.getPlugin('#color-selector-2', 'color-selector').user().join(','))">Get user colors</button>
</div>
<div id="color-selector-2"
data-role="color-selector"
data-cls-selector="bg-dark"
data-cls-value="bg-dark fg-white"
data-cls-label="bg-dark fg-white bd-darkGrayBlue"
data-cls-input="bd-darkGrayBlue"
data-cls-user-colors-title="fg-white"
data-cls-user-color-button="secondary"
data-hsv-mode="double"
data-locale="uk-UA"
data-on-select-color="selectColor"
></div>
</div>
</div>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
function selectColor(color, primitive){
$("body").css({
background: primitive.rgba
})
}
</script>
</body>
</html>