나의 첫번쨰 Lightning Web Component

This is my first lightning web component to list down all the available contacts from a json file.

The component visibility in any of salesforce pages is based on the configuration in meta xml file.

	<template>
	<lightning-card title="My Available Contacts" variant="narrow" icon-name="standard:custom57":wq>
	<div class="slds-m-around_medium">
	<template for:each={contacts} for:item='contact'>
	<lightning-layout vertical-align="center" key={contact.Id} class="slds-m-vertical_medium">
	<lightning-layout-item>
	<img src={contact.Picture__c} alt="Profile photo" />
	</lightning-layout-item>
	<lightning-layout-item padding="around-small">
	<p>{contact.Name}</p>
	<p>{contact.Title}</p>
	<p>
	<lightning-formatted-phone value={contact.Phone}></lightning-formatted-phone>
	</p>
	</lightning-layout-item>
	</lightning-layout>
	</template>
	</div>
	<div slot="footer">
	<h6>Visit My <a href="http://techevangel.com">Blog</a> for more details…</h6>
	</div>
	</lightning-card>
	</template>

view rawcontact-list.html hosted with 

 by GitHub

	import { LightningElement } from 'lwc';
	export default class ContactList extends LightningElement {
	contacts = [
	{
	Id: '003171931112854375',
	Name: 'Amy Taylor',
	Title: 'VP of Engineering',
	Phone: '6172559632',
	Picture__c:
	'https://s3-us-west-1.amazonaws.com/sfdc-demo/people/amy_taylor.jpg';
	},
	{
	Id: '003192301009134555',
	Name: 'Michael Jones',
	Title: 'VP of Sales',
	Phone: '6172551122',
	Picture__c:
	'https://s3-us-west-1.amazonaws.com/sfdc-demo/people/michael_jones.jpg';
	},
	{
	Id: '003848991274589432',
	Name: 'Jennifer Wu',
	Title: 'CEO',
	Phone: '6172558877',
	Picture__c:
	'https://s3-us-west-1.amazonaws.com/sfdc-demo/people/jennifer_wu.jpg';
	}
	];
	}

view rawcontact-list.js 

	img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	}

view rawcontact-list1.css hosted with  

	<?xml version="1.0" encoding="UTF-8"?>
	<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="contactList">
	<apiVersion>45.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
	<target>lightning__AppPage</target>
	<target>lightning__RecordPage</target>
	<target>lightning__HomePage</target>
	</targets>
	</LightningComponentBundle>

view rawcontactList.js-meta.xml hosted with 

https://github.com/anilsomasundaran/contact-list