Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Sticky Note

Web Component Stycky Note


Sticky notes are a useful component to present notices to the user always visible and prominent. Its format is easily recognizable by the user as a typical sticky note.

A title, a small message and a link is all the information that this web component needs to be configured. You can also customize it to decide which position to include it in, the background color, the text color, and the rotation of the note.

The url of this cloud web component is http://www.wpiece.com/p/13_31

Do not forget to include before the component's import the polyfill for web components.

To use it with its basic configuration indicate its title, description and url of the link to which the user must go to expand information.

<!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>

Use examples

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

Where to include it

Attribute data-where allows you to indicate the horizontal (left or right) and/or the vertical (top/bottom) position. By default it will appear in the "top left".

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

Background color

To change the background color use the attribute data-background.

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

Text color

And if you want to change the color of the text use the attribute data-color.

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

Rotation of the Note

If you use the attribute data-rotate you can indicate the inclination with which you want to present the note.

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

Hide your Note

Finally, you can hide the note after a number of seconds. The time can be indicated with the attribute data-hide-after.