Il giorno 08 Gennaio 2018 ho modificato il mio primo web component
Analizziamo il contenuto
<!-- myComponent.html -->
<template>
<lightning-card title={ciao} icon-name="action:goal">
<div class="slds-m-around_medium">
{ciao}, {greeting}!
</div>
<c-view-source source="lwc/hello" slot="footer">
Bind an HTML element to a component property. Ceck
</c-view-source>
</lightning-card>
</template>
il tag template è un tag paragonabile al body di html. Deve essere presente in tutti i web components.
I commenti vengono scritti come in html
lightning-card è un componente. Lista dei componenti lightning disponibile all’indirizzo https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example
Sostituire per i componenti il separatore : con il –
I componenti aura e quelli LWC possono coesistere insieme
L’attributo icon-name genera una icona. La lista delle icone è disponibile alla url https://www.lightningdesignsystem.com/icons/#action
Le classi css usate sono di Lightning Design System. Lista disponibile qui https://www.lightningdesignsystem.com/utilities/margin/
import { LightningElement } from 'lwc';
export default class Hello extends LightningElement {
ciao = 'Finalmente';
greeting = 'World la mia prima modifica a un LWC';
// funzione richiamata da html
handleBtnClick() {
window.open('https://www.picchiri.com','_blank');
}
}
Il js sopra descritto è il controller della nostra pagina html o web component
Creazione di un LWC Lightning Web Component con Visual Studio Code