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
}
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter