Versiones comparadas

Clave

  • Se ha añadido esta línea.
  • Se ha eliminado esta línea.
  • El formato se ha cambiado.

...

¡OJO! Los estilos están todavía en desarrollo, esto es una versión alpha.

...

Disponemos de un showcase de componentes con el estilo corporativo (y su código correspondiente): FUNDEWEBJS SHOWCASEDisponemos de estilos unos css para adaptar los componentes dede Primevue (versión 2.4.2) al estilo corporativo de la UMU. Próximamente estará disponible como un paquete en el reposiotrio Verdaccio, para poder instalarlo con npm i, pero de momento tenemos que meter los archivos en nuestro proyecto a mano.

Para ello, tenemos que descargar este archivo: estiloUMU.rar

Tenemos que descomprimirlo dentro de src/assets/

Se puede ver una muestra de éstos, así como el código utilizado, en el siguiente showcase: FUNDEWEBJS SHOWCASE.

Cómo importar el estilo corporativo

El estilo corporativo está subido al repositorio Verdaccio, así que en primer lugar necesitamos tener en la raíz de nuestro proyecto el archivo .npmrc que incluya esta línea:

Bloque de código
registry = https://verdaccio.um.es

Después, tenemos que bajarnos el paquete ejecutando el siguiente comando en la terminal:

Bloque de código
npm i @mncs/fwjs-components

Una vez hecho esto, tenemos que importar el Una vez hecho, sólo tendremos que importar el archivo css principal en nuestro main.js, (después de haber importado los estilos de Primevue, pues lo que hacemos es sobreescribir algunos de ellos), añadiendo:

Bloque de código
languagejs
import "@mncs// Estilos Primevue
...

// Estilo corporativo
import "./assets/estiloUMU/fdwjs.css";fwjs-components/estiloUMU.css";

Por último, tenemos que añadir un mixin que va incluido en el paquete, poniéndolo en App.vue de esta manera:

Bloque de código
languagejs
import mixinFixEstiloUMU from "@mncs/fwjs-components/estiloUMU/mixinFixEstiloUMU.js"

export default {
  mixins: [mixinFixEstiloUMU],
  ... 
}