Exponer y personalizar variables CSS de Oruga UI en Vue 3

- Andrés Cruz

In english
Exponer y personalizar variables CSS de Oruga UI en Vue 3

Oruga UI es un framework basado en componentes para Vue 3 con el cual se pueden hacer aplicaciones con buena presencia empleando la gran cantidad de componentes que nos trae; pero, la diferencia fundamental con otros frameworks basados en componentes, es que, podemos cambiar el diseño de los mismos fácilmente para emplear el personalizado, en conjunto de otros frameworks como Bootstrap o Tailwind CSS fácilmente y limpiamente; para esto, debemos de exponer el CSS de Oruga, específicamente, las variables que nos permiten cambiar aspectos de los mismos como formato del texto, colores, bordeados, espaciados, etc.

Podemos personalizar fácilmente Oruga UI a nivel de la interfaz gráfica, cambiar aspectos como el borde, color de fondo... en definitiva, cualquier aspecto que puedas personalizar con CSS se puede realizar fácilmente exponiendo las variables de Oruga UI que usan los componentes de oruga UI

Exponemos las variables de Oruga UI para variar el estilo

Importamos el paquete de las variables con el cual podremos variar facilmente el tema:

resources\js\vue\main.js

//***
import '@oruga-ui/oruga-next/dist/oruga-full.css'
import '@oruga-ui/oruga-next/dist/oruga-full-vars.css'

Modificamos las variables

 Y ya con esto, ahora el CSS de los componente de Oruga UI es basado en variables, y con esto, podemos personalizar las mismas; en este ejemplo, usando Tailwind:

resources\css\vue.css

h1{
    @apply text-3xl text-center my-5
}
:root{
    --oruga-modal-content-padding:0
}
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.