oruga
v0.9.3
Oruga UI es como una oruga, mínima y funcional. Está en tus manos convirtiéndolo en una mariposa
(?) =>?
Oruga es una biblioteca liviana de componentes de la interfaz de usuario para Vue.js sin dependencia. Ofrece un conjunto de componentes fácilmente personalizables y no depende de ningún estilo específico o marco CSS (como Bootstrap, Bulma, Tailwindcss, etc.). Por lo tanto, no proporciona un sistema de cuadrícula o utilidades CSS, pero puede integrar cualquier marco CSS que desee. Oruga le proporciona un conjunto de componentes funcionales, por lo que puede concentrarse solo en los aspectos de UI/UX de su aplicación y puede ser completamente flexible para cambios futuros sin tener que tocar una línea de JavaScript.
Si necesita una biblioteca de componentes y desea aplicar fácilmente sus estilos personalizados, ¡Orga es la biblioteca para usted! ?
Además, si no desea diseñar todo usted mismo, hemos creado varios temas para proporcionarle una variedad de estilos listos para usar. ?
Explore la documentación en línea aquí.
? Para obtener más información sobre la personalización de los componentes, lea cuidadosamente la sección "Personalización" en la documentación.
? Para ver a Oruga en acción, vaya a la sección Ejemplo de la documentación.
Nota: El código fuente de los ejemplos de documentación se puede encontrar en los directorios examples para cada componente, también sirve como demostración.
? Oruga está disponible para Vue.js versión 3.x
npm install @oruga-ui/oruga-next Para comenzar rápidamente, use Oruga para registrar todos los componentes:
import { createApp } from 'vue'
import Oruga from '@oruga-ui/oruga-next' ;
createApp ( ... ) . use ( Oruga ) ;Para usar el agitación de los árboles, registre el componente manualmente:
import { createApp } from 'vue'
import { OField , OInput } from '@oruga-ui/oruga'
createApp ( ... )
. use ( OField )
. use ( OInput )o importarlos en su SFC.
La superpotencia de Oruga es su configurabilidad y su enfoque agnóstico CSS Framework. Cada componente se puede personalizar y configurar individualmente definiendo clases específicas utilizando un enfoque de mapeo de clases. Por lo tanto, Oruga viene sin ningún estilo por defecto. Sin embargo, hay varias configuraciones predefinidas oficiales llamadas temas, que puede incluir y extender para darle a su aplicación una apariencia individual. Y todos los componentes vinieron con clases predefinidas de forma predeterminada.
Lea la sección "Personalización" en la documentación de Oruga.
Si desea ver un ejemplo con un formulario de registro totalmente personalizado que usa Tailwind , Bulma , Bootstrap , Material o cualquier otro marco CSS, eche un vistazo al ejemplo oficial de ORUGA MultiFrameWork (código fuente disponible aquí)
Oruga no proporciona un módulo nuxt.js en este momento.
Puede usar el sistema de complementos Nuxt.js agregando un archivo (por ejemplo, oruga.js ) en su carpeta plugins que contiene:
import Oruga from '@oruga-ui/oruga-next' ;
export default defineNuxtPlugin ( ( nuxtApp ) => {
nuxtApp . vueApp . use ( Oruga ) ;
} ) ; Para que este complemento esté disponible en su aplicación, agregue este archivo a la matriz plugins en su nuxt.config.js
plugins: [ { src : '~plugins/oruga.js' } ]Para comprender cómo funcionan los complementos con nuxt.js, eche un vistazo a la documentación del complemento NuxtJS.
Eche un vistazo al ejemplo oficial de NuxtJS + Oruga.
Consulte las pautas contribuyentes.
→ Unir el servidor Oruga Discord.
Oruga usa Versiones semánticas 2.0.0 para versiones de paquetes.
Mientras todavía está en beta, las versiones seguirán este patrón: v0.yz , donde:
Walter Tommasi | Andrea Stagi | Marcel Moravek |
Gracias a todos los involucrados por mejorar este proyecto, día a día.
Lista completa.
Logotipo de oruga diseñado por Matteo Guadagnini
Oruga SVG Images para la casilla de verificación y los componentes de radio y los activos de vacaciones creados por Fabrizio Masini
Código publicado bajo la licencia MIT.
