Crear un formulario con una barra de progreso en el componente web Lightning

<valor-barra-de-progreso-del-relámpago={progreso}> </relámpago-barra-de-progreso>

<?versión xml="1.0" codificación="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadatos"> <apiVersion>54.0</apiVersion> <isExposed>verdadero</isExposed> <objetivos> <target>relámpago__RecordPage</target> <target>relámpago__AppPage</target> <objetivo>relámpago__Página de inicio</objetivo> </objetivos>
</LightningComponentBundle>

<!-- EjemploBarraProgreso.html -->
<plantilla> <formulario> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Ejemplo de barra de progreso</b> </div> <div class="slds-box slds-theme_default"> <div style="margen-izquierda: 2%;"> <div> <div class="slds-grid slds-grid_align-spread slds-p-bottom_x-small"> <span>Seguimiento del progreso</span> <span aria-hidden="verdadero"> <strong>{progreso}% completado</strong> </span> </div> </div> <barra de progreso relámpago tamaño = "mediano" valor={progreso} variante="circular"> </relámpago-barra-de-progreso> </div> <entrada de rayo nombre="nombre" etiqueta = "Nombre" valor={nombre} onchange={handleChange}> </relámpago-entrada> <entrada de rayo nombre="apellido" label="Apellido" valor={apellido} onchange={handleChange}> </relámpago-entrada> <entrada de rayo tipo = "fecha" nombre="fecha de nacimiento" label="Fecha de nacimiento" valor={fecha de nacimiento} onchange={handleChange}> </relámpago-entrada> <entrada de rayo escriba = "correo electrónico" nombre="dirección de correo electrónico" label="Dirección de correo electrónico" valor = {dirección de correo electrónico} onchange={handleChange}> </relámpago-entrada> <entrada de rayo tipo = "tel" nombre="móvil" etiqueta="Móvil" valor={móvil} onchange={handleChange}> </relámpago-entrada> <div class="slds-m-top_small slds-align_absolute-center"> <botón-relámpago variante="Neutro" etiqueta="Reiniciar" clase="slds-m-izquierda_x-pequeña" onclick={manejarReset}> </botón-relámpago> <botón-relámpago variante="marca" clase="slds-m-izquierda_x-pequeña" etiqueta="Enviar" onclick={manejarEnviar}> </botón-relámpago> </div> </div> </formulario>
</plantilla>

//ProgressBarExample.js
importar { LightningElement } desde 'lwc'; exportar clase predeterminada InputExample extiende LightningElement() { progreso = 0; dirección de correo electrónico = ''; móvil = ''; fecha de nacimiento = ''; primerNombre = ''; apellido = ''; handleChange(evento) { const campo = evento.objetivo.nombre; if (campo === 'nombre') { this.firstName = event.target.value; } más si (campo === 'apellido') { this.lastName = event.target.value; } más si (campo === 'móvil') { este.móvil = evento.objetivo.valor; } más si (campo === 'dirección de correo electrónico') { this.emailAddress = event.target.value; } else if (campo === 'fecha de nacimiento') { this.birthdate = event.target.value; } this.fieldsCompleted(); } campos Completados() { var numVal = 0; if (this.firstName != null && this.firstName != '') { numVal = numVal + 1; } if (este.apellido != nulo && este.apellido != '') { numVal = numVal + 1; } if (esta.fecha de nacimiento != null && esta.fecha de nacimiento != '') { numVal = numVal + 1; } if (esta.dirección de correo electrónico != null && esta.dirección de correo electrónico !='') { numVal = numVal + 1; } if (este.móvil != null && este.móvil !='') { numVal = numVal + 1; } this.progressBar(numVal); } barraprogreso(valornum) { si (valornumero >= 1) { este.progreso = numVal * 20; } más { este.progreso = 0; } } manejarEnviar() { } manejarReset() { este.progreso = 0; esta dirección de correo electrónico = ''; este.movil = ''; esta.fecha de nacimiento = ''; este.nombre = ''; este.apellido = ''; }
}