LWC – Sintassi proprietà / property
Vai alla pagina
Docy turns out that context is a key part of learning.
Codice html
<template>
<lightning-card title={ciao} icon-name="action:goal">
<div class="slds-grid slds-gutters">
<div class="slds-col slds-size_3-of-5">
<div class="slds-m-around_medium">
{ciao}, {greeting}!
</div>
</div>
<div class="slds-col slds-size_2-of-5">
<div class="slds-m-around_medium">
<lightning-button label='Chi sono' value='about' id="about" onclick={handleBtnClick}></lightning-button>
</div>
</div>
</div>
<c-view-source source="lwc/hello" slot="footer">
Bind an HTML element to a component property. Ceck
</c-view-source>
</lightning-card>
</template>
codice js
// importazione libreria per lwc
import { LightningElement } from 'lwc';
// dichiarazione classe principale
export default class Hello extends LightningElement {
// etichette che vengono sostituite dinamicamente nel codice html
ciao = 'Finalmente';
greeting = 'World la mia prima modifica a un LWC';
// funzione richiamata da html
handleBtnClick() {
window.open('https://www.picchiri.com','_blank');
}
}
Esempio Grafico