0

Implementar framework (XEL) en electron

Buenas, hoy quiero compartir como implementar el framework (XEL) en el curso vemos como hacerlo con (Photom) pero en mi opinión personal opino que ese framework es mas orientado a dispositivos Mac, en XEL tenemos un poco mas de libertad a la hora de elegir el tema o skin que deseamos desde el Mac, Vanilla (Windows), Material Design, añade una pisca de complejida al manejarse como componentes pero no es algo el cual uno deba asustarse en verdad es mas fácil de lo que parece, bueno sin mas charla esta es la manera que yo encontré.

  1. Primero tenemos que instalar XEL en nuestra raíz. para instalar el framework nos ubicamos en la (Consola/Terminal/CMD) nos dirigimos a la ruta de la carpeta raíz de nuestro programa y ejecutamos el siguiente programa: [npm install xel]

  2. Después que termine de instalar nuestro framework tenemos que enlazar/llamar la ruta de nuestros archivos CSS. los archivos css hay que tener encuenta que van en el archivo HTML que queramos que utilice los estilos, y se coloca la linea de código en medio de las etiquetas <head></head> de nuestro archivo. en este framework tenemos 3 opciones de estilos/skins (Vanilla, MacOs, MaterialDesign).

MacOS theme:

`<linkrel="stylesheet"href="node_modules/xel/themes/macos.css">

Material theme:

<linkrel="stylesheet"href="node_modules/xel/themes/material.css">

Vanilla theme:

<linkrel="stylesheet"href="node_modules/xel/themes/vanilla.css">
  1. Despues de tener nuestros estilos de CSS en el archivo tenemos que tambien llamar nuestro JavaScript del framework para realizar esto simplemente nos ubicamos en el <head></head> si queremos que cargue todo el framework an inicio si queremos que los scripts se carguen al final los colocamos al final del <body></body> todo depende de la aplicacion que desees realizar y como quieres que se ejecute.
<scriptsrc="node_modules/xel/xel.min.js"></script>

Con esos 3 pasos ya podemos empezar a utilizar el framework de XEL, podemos encontrar toda la documentas, los componentes y mas del framework en la pagina oficial.

Escribe tu comentario
+ 2