Guía de creación del Proyecto
Partimos de la misma tabla que en el anterior, aunque en este caso lo publicaremos en una aplicación de canvas.
- Busca en internet cómo hacer el efecto de texto de Star Wars en HTML. Toma el primer resultado y replica el diseño en un PCF.
- Estos son los elementos HTML que vamos a crear.
- Este es el CSS que utilizaremos para crear el efecto de la introducción de Star Wars.
- Comenzamos el ciclo de creación creando la carpeta del proyecto y abriéndola en VSCode.
- Inicializa el componente (Pcf Star Wars Text) e incluye
--run-npm-install
para que, tras inicializar, instale las dependencias automáticamente. - Crea una carpeta y un archivo para guardar el CSS, que por defecto suele llamarse como el PCF.
- Copia el CSS y haz algunas modificaciones a la clase
body
, que ahora se llamarácontainerPCF
. - Dentro de
index.ts
, crea las variables y los elementos HTML según las indicaciones en la web, y asigna sus clases CSS correspondientes. - Añade cada elemento al contenedor final usando
append
. - Ejecuta
npm start watch
para compilar el proyecto localmente y verificar cómo se ve. Aunque ya se haya creado el CSS, especifica al control que debe usar este archivo CSS. - Dado que solo se inicializa en el
INIT
, añade un botón para reiniciar la animación. - Haz que el primer texto sea dinámico de acuerdo con el valor de tu propiedad inicial.
- Ya puedes publicar el componente sin necesidad de volver a iniciar sesión.
- Finalmente, crea una aplicación de canvas donde insertarás el PCF completo.
- Observa cómo, al modificar el valor de la propiedad, se ajusta el primer texto. Además, cuando pulsas el botón de reinicio, la animación vuelve a comenzar.
Recuerda visitar mi portal de juegos
PORTAL DE JUEGOS