Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Web components examples using wpiece: Cloud Web Components

Cloud Web Components examples


Here are some examples of how to streamline your developments thanks to wpiece. Using web components you can modularize the frontend of your projects. And with wpiece store them in the cloud so you do not have to deploy your main application every time you have to change them.

Thanks to this you can also reuse those same components in other projects. Let's call them Cloud Web Components.

<ascii-image
	src="http://your.image.com/name.jpg">
</ascii-image>

Ascii Image

We bring you some art (Ascii Art) with this web component that will transform any image into characters. Set the size, color and background color to make beautiful creations.

See Ascii Image in action and how to use it


<contact-card
	avatar="img_avatar2.png"
	name="Contact name"
	position="Contact position"
	url="http://www.wpiece.com">
</contact-card>

Contact Card

An example of how to encapsulate in a custom element complex html structures to make our html code more readable, maintainable and reusable. Especially when these structures are used repetitively.

See Contact Card in action and how to use it


<circle-loader>
</circle-loader>

Circle Loader

With this Cloud Web Component you no longer need to create load icons for each website. Set the size, color and effect of the icon for any website where you need it.

See Circle Loader in action and how to use it


<site-notifier
	href="http://url.notification.list">
</site-notifier>

Site Notifier

Add a lightweight notification system to your website. With it you can present messages and warnings to your users when you need.

SEE Site Notifier in action and how to use it


<background-video>
	<source src="video.mp4" type="mp4">
</background-video>

Background Video

Include a video with autoplay as your website background to have impactful landing pages.

See Background Video in action and how to use it


<device-view type="phone" min-width="300" max-width="900">
	Content that will be displayed if the device is a mobile
	with screen width between 300 and 900 pixels.
</device-view>

Device View

Control the elements of your web to decide which to present to the user based on the device and the width of the screen from which it accesses.

See Device View in action and how to use it


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

Sticky Note

Present messages to your users with the appearance of sticky notes. You can configure their position, their color or how much time should be visible before hiding it.

See Sticky Note in action and how to use it


<shadow-wrapper
	url-content="http://www.foo.com/component/your-html-component.html">
</shadow-wrapper>

Shadow Wrapper

Allows any element to be inserted as Shadow DOM on your page. In this way it remains encapsulated. Use it and adapt it to different websites by modifying their appearance (css) and actions (javascript).

See Shadow Wrapper in action and how to use it


<floating-banner>
	banner content (html, text,...)
</floating-banner>

Floating Banner

A simple way to make any web element always visible to the user. We can indicate where we want it (top/bottom and left/right).

See Floating Banner in action and how to use it