Conecte dos elementos DOM con una flecha direccional-domédula. js
| Autor: | schaumb |
|---|---|
| Views Total: | 216 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 11, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
domédula. js es un componente de JavaScript que dibuja una flecha direccional que conecta entre dos elementos DOM para revelar la relación entre ellos.
Sin necesidad de elementos SVG o Canvas. Construido usando JavaScript puro, HTML y CSS.
See also:
- dibuja rutas SVG entre dos elementos â & #128; & #147; línea directriz
- dibuja rutas SVG direccionales entre los elementos â & #128; & #147; svgDynamicDirectionalPath. js
Funcionamiento
Cargue el domedular. js y domédula. CSS en el documento HTML.
<link rel="stylesheet" href="domarrow.css"> <script src="domarrow.js"></script>
Cree dos elementos en la página.
<div id="d1"></div> <div id="d2"></div>
Cree una flecha direccional entre estos dos elementos.
<connection from="#d1" to="#d2" tail></connection>
Establezca el color de la flecha direccional.
<connection from="#d1" to="#d2" color="red" tail></connection>
Oculte la flecha (sólo línea).
<connection from="#d1" to="#d2" color="red"></connection>
