oruga

Oruga UI est comme une chenille, minimale et pourtant fonctionnelle. C'est entre tes mains en le transformant en papillon

(?) =>?

Caractéristiques

Oruga est une bibliothèque de composants d'interface utilisateur légère pour vue.js sans aucune dépendance. Il propose un ensemble de composants facilement personnalisables et ne dépend pas d'un style spécifique ou d'un framework CSS (comme Bootstrap, Bulma, TailwindCSS, etc ...). Par conséquent, il ne fournit pas de système de grille ou de services publics CSS, mais vous pouvez intégrer n'importe quel cadre CSS que vous aimez. Oruga vous fournit un ensemble de composants fonctionnels, vous pouvez donc vous concentrer uniquement sur les aspects d'interface utilisateur / UX de votre application et peut être entièrement flexible pour les changements futurs sans avoir à toucher une ligne de JavaScript.

• CSS Framework Agnostic : Aucune dépendance à l'égard d'un cadre / bibliothèque CSS spécifique, mais vous pouvez facilement intégrer les composants avec l'un d'eux car ils sont entièrement personnalisables de différentes manières
• Composants avec stéroïdes : la plupart des composants ne sont pas un simple emballage d'éléments indigènes, mais ils ajoutent des fonctionnalités nouvelles et personnalisées
• Léger : aucune autre dépendance interne et importer uniquement les composants dont vous avez besoin

Si vous avez besoin d'une bibliothèque de composants et que vous souhaitez facilement appliquer vos styles personnalisés, Oruga est la bibliothèque pour vous! ?

De plus, si vous ne voulez pas tout coiffer vous-même, nous avons créé plusieurs thèmes pour vous fournir une variété de styles prêts à l'emploi. ?

Documentation

Parcourez la documentation en ligne ici.

? Pour plus d'informations sur la personnalisation des composants, lisez attentivement la section "Personnalisation" dans la documentation.

? Pour voir Oruga en action, accédez à la section Exemple de la documentation.

Remarque: Le code source des exemples de documentation peut être trouvé dans les répertoires examples pour chaque composant, il sert également de démo.

Démarrage rapide

? Oruga est disponible pour Vue.js version 3.x

Configuration d'Oruga

1. Installer Oruga.

npm install @oruga-ui/oruga-next

2. Importer les composants:

• Pour commencer rapidement, utilisez Oruga pour enregistrer tous les composants:

   import { createApp } from 'vue'
  import Oruga from '@oruga-ui/oruga-next' ;
  
  createApp ( ... ) . use ( Oruga ) ;

• Pour utiliser des tremblements d'arbres, enregistrez les composants manuellement:

   import { createApp } from 'vue'
  import { OField , OInput } from '@oruga-ui/oruga'
  
  createApp ( ... )
    . use ( OField )
    . use ( OInput )

• ou importez-les dans votre SFC.

Personnalisation

La superpuissance d'Oruga est sa configurabilité et son approche agnostique du cadre CSS. Chaque composant peut être personnalisé et configuré individuellement en définissant des classes spécifiques à l'aide d'une approche de cartographie de classe. Par conséquent, Oruga vient sans aucun style par défaut. Cependant, il existe plusieurs configurations prédéfinies officielles appelées thèmes, que vous pouvez inclure et étendre pour donner à votre application un aspect et une sensation individuels. Et tous les composants sont venus avec des classes prédéfinies par défaut.

Veuillez lire la section "Personnalisation" dans la documentation Oruga.

Si vous souhaitez voir un exemple avec un formulaire d'enregistrement entièrement personnalisé utilisant Tailwind , Bulma , Bootstrap , Material ou tout autre cadre CSS, jetez un œil à l'exemple officiel d'Oruga MultiFramework (code source disponible ici) ou si vous êtes plus familier avec TailwindCSS 2

Utilisation d'Oruga avec Nuxt

Oruga ne fournit pas de module nuxt.js pour le moment.

Vous pouvez utiliser le système de plugins nuxt.js ajoutant un fichier (par exemple oruga.js ) dans votre dossier plugins contenant:

 import Oruga from '@oruga-ui/oruga-next' ;

export default defineNuxtPlugin ( ( nuxtApp ) => {
  nuxtApp . vueApp . use ( Oruga ) ;
} ) ;

Pour rendre ce plugin disponible dans votre application, ajoutez ce fichier au tableau plugins dans votre nuxt.config.js

plugins: [ { src : '~plugins/oruga.js' } ]

Pour comprendre comment les plugins fonctionnent avec nuxt.js, jetez un œil à la documentation du plugin nuxtjs.

Jetez un œil à l'exemple officiel NuxtJS + Oruga.

Contributif

Veuillez consulter les directives contributives.

Contactez-nous ?

→ Rejoignez le serveur Oruga Discord.

Versioning

Oruga utilise le versioning sémantique 2.0.0 pour les versions de package.

Bien qu'il soit toujours en version bêta, les versions suivront ce modèle: v0.yz , où:

• Y : Major (changements de rupture)
• Z : mineur ou patch

Équipe de base

Walter Tommasi

Andrea Stali

Marcel Moravek

Contributeurs

Merci à toutes les personnes impliquées pour l'amélioration de ce projet, jour après jour

Liste complète.

Crédits

Logo Oruga conçu par Matteo Guadagnini

Images Oruga SVG pour les composants à cocher et la radio et les actifs de vacances créés par Fabrizio Masini

Licence

Code publié sous la licence MIT.