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

Web Component Contact Card


With Contact Card we will see a practical example of how to encapsulate a html structure in a Cloud Web Component and use it to generate complex elements from basic html elements.

But, if the end result that the user sees is the same and we do not add additional functionality to that html structure, what advantages does a custom element have?

  • For structures that are going to be used repetitively (web design elements like "Card" is a clear example) the generated html is much more readable to developers and also more maintainable. Let's see the difference.
    HTML plano
    <div class="contact-card">
    	<a href="http://www.yoururl.com">
    	  <img src="your_avatar.png" alt="Your name">
    	  <div class="cccontainer">
    		<h4>
    			<b>Your name</b>
    		</h4>
    		<p>Your position</p>
    	  </div>
    	</a>
    </div>
    
    <div class="contact-card">
    	<a href="http://www.yoururl.com">
    	  <img src="your_avatar.png" alt="Your name">
    	  <div class="cccontainer">
    		<h4>
    			<b>Your name</b>
    		</h4>
    		<p>Your position</p>
    	  </div>
    	</a>
    </div>
    Custom element
    <contact-card avatar="your_avatar.png" name="Your name"
    	position="Your position" url="http://www.yoururl.com">
    </contact-card>
    
    <contact-card avatar="your_avatar.png" name="Your name"
    	position="Your position" url="http://www.yoururl.com">
    </contact-card>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  • If you need to modify your HTML structure, which is simpler? Modify it one by one in all places where you are using it or only in the custom element where it is generated? By means of a previous analysis one can identify equivalent structures in any web application that differ little between them (the color of text, an element html, ...). If for all of them a parameterizable custom element is generated (colors, values of each element, ..) that covers them all, it is easy to encapsulate and reuse.
  • And if you host your component in the cloud thanks to wpiece your agility to modify it and reuse it will be much greater.

Component use

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

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

To use it with its basic configuration you need only include it and indicate the contact data.

<!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/18_41" />
</head>

<body>
	<contact-card
		avatar="img_avatar2.png"
		name="Alvaro Morala"
		position="Rey del mundo"
		url="http://www.wpiece.com">
      	</contact-card>
</body>
</html>

An example

Empty card

<contact-card>
</contact-card>




Filled card

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