Material Design control de medidor de estilo con JavaScript y CSS3
| Autor: | sathomas |
|---|---|
| Views Total: | 4,472 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 30, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un control de calibre semicircular sencillo y de diseño de material diseñado con transformaciones HTML, CSS y CSS3 puras.
Funcionamiento
Incluya la hoja de estilos material-Gauge. CSS requerida en la sección head del documento.
<link rel="stylesheet" href="material-gauge.css">
Compile la estructura HTML para el control de medidor.
<div class="gauge gauge__liveupdate" id="gauge"> <div class="gauge--container"> <div class="gauge--marker"></div> <div class="gauge--background"></div> <div class="gauge--center"></div> <div class="gauge--data"></div> <div class="gauge--needle"></div> </div> <div class="gauge--labels mdl-typography--headline"> <span class="gauge--label__low">E</span> <span class="gauge--label__spacer"></span> <span class="gauge--label__high">F</span> </div> </div>
Incluya el material-Gauge. js en cualquier lugar de su página web. Le permite actualizar el control de medidor dinámicamente.
<script src="material-gauge.js"></script>
El código JavaScript para establecer el valor que desea presentar en el control de medidor.
var gauge = new Gauge(document.getElementById("gauge"));
gauge.value(0.5);
