Web Component Nota Adhesiva


Las notas adhesivas son un componente útil para presentar al usuario avisos siempre visibles y destacados. Su formato es fácilmente reconocible por el usuario como una típica sticky note.

Un título, un pequeño mensaje y un enlace es toda la información que necesita este web component para ser configurado. También podrás personalizarlo para decidir en que posición incluirla, el color de fondo, el colo de texto y la rotación de la nota.

La url de este cloud web component es http://www.wpiece.com/p/13_31

No olvides incluir antes de la importación del componente el polyfill para web components.

Para usarlo con su configuración básica indica su título, descripción y la url del enlace al que debe ir el usuario para ampliar información.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://www.wpiece.com/p/13_31" />
</head>

<body>
	<sticky-note data-title="title #1" data-text="Description #1" data-link="http://www.foo.com"></sticky-note>
</body>
</html>

Ejemplos de uso

<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com" data-where="bottom right">
</sticky-note>

Donde incluirlo

El atributo data-where te permite indicar la posición horizontal (left o right) y/o la vertical (top / bottom). Por defecto aparecerá en la posición "top left".

<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com" data-background="#373">
</sticky-note>

Color de fondo

Para cambiar el color de fondo utiliza el atributo data-background.

<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com" data-color="#eea">
</sticky-note>

Color de texto

Y si quieres cambiar el color del texto utiliza el atributo data-color.

<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com" data-rotate="12">
</sticky-note>

Rotación de la Nota

Si utilizas el atributo data-rotate podrás indicar la inclinación con la que quieres presentar la nota.

<sticky-note
	data-title="title #1" data-text="Description #1" data-link="http://www.foo.com" data-hide-after-="5">
</sticky-note>

Ocultar la Nota

Por último, podrás ocultar la nota después de un número de segundos. El tiempo lo puedes indicar con el atributo ddata-hide-after.