oruga

Die UI -UI ist wie eine Raupe, minimal und doch funktional. Es ist in deinen Händen, es in einen Schmetterling zu verwandeln

(?) =>?

Merkmale

Oruga ist eine leichte UI -Komponentenbibliothek für Vue.js ohne Abhängigkeit. Es bietet eine Reihe leicht anpassbarer Komponenten und hängt nicht von einem bestimmten Stil- oder CSS -Framework ab (wie Bootstrap, Bulma, Tailwindcss usw.). Daher bietet es keine Gittersysteme oder CSS -Dienstprogramme, aber Sie können jeden CSS -Framework integrieren, den Sie mögen. ORUGA bietet Ihnen eine Reihe von funktionalen Komponenten, sodass Sie sich nur auf die UI/UX -Aspekte Ihrer Anwendung konzentrieren können und für zukünftige Änderungen völlig flexibel sein können, ohne eine JavaScript -Linie berühren zu müssen.

• CSS Framework Agnostic : Keine Abhängigkeit von einem bestimmten CSS -Framework/-bibliothek, aber Sie können die Komponenten problemlos in einen von ihnen integrieren, da sie auf unterschiedliche Weise vollständig anpassbar sind
• Komponenten mit Steroiden : Die meisten Komponenten sind keine einfachen Wrapper nativer Elemente, fügen jedoch neue und benutzerdefinierte Funktionen hinzu
• Leichtes Gewicht : Keine andere interne Abhängigkeit und importieren nur Komponenten, die Sie benötigen

Wenn Sie eine Komponentenbibliothek benötigen und Ihre benutzerdefinierten Stile problemlos anwenden möchten, ist Oruga die Bibliothek für Sie! ?

Wenn Sie nicht alles selbst stylen möchten, haben wir mehrere Themen erstellt, um Ihnen eine Vielzahl von stationären Stilen zu bieten. ?

Dokumentation

Durchsuchen Sie die Online -Dokumentation hier.

? Weitere Informationen zur Anpassung der Komponenten finden Sie in der Dokumentation sorgfältig den Abschnitt "Anpassung".

? Um Oruga in Aktion zu sehen, gehen Sie zum Beispielabschnitt in der Dokumentation.

HINWEIS: Der Quellcode der Dokumentationsbeispiele finden Sie in den examples für jede Komponente, die auch als Demo dient.

Schneller Start

? Oruga ist für Vue.js Version 3.x erhältlich

Setup orruga

1. ORUGA einbauen.

npm install @oruga-ui/oruga-next

2. Importieren Sie die Komponenten:

• Um schnell loszulegen, verwenden Sie Oruga , um alle Komponenten zu registrieren:

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

• Um Baumschütteln zu verwenden, registrieren Sie entweder die Komponente manuell:

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

• Oder importieren Sie sie in Ihr SFC.

Anpassung

Die Supermacht von Oruga ist seine Konfigurierbarkeit und sein CSS -Framework Agnostic -Ansatz. Jede Komponente kann individuell angepasst und konfiguriert werden, indem bestimmte Klassen mit einem Klassen-Mapping-Ansatz definiert werden. Daher kommt Oruga standardmäßig ohne Styling. Es gibt jedoch mehrere offizielle vordefinierte Konfigurationen, die als Themen bezeichnet werden, die Sie einbeziehen und erweitern können, um Ihrer Anwendung ein individuelles Erscheinungsbild und Gefühl zu geben. Und alle Komponenten wurden standardmäßig mit vordefinierten Klassen geliefert.

Bitte lesen Sie den Abschnitt "Anpassung" in der ORUGA -Dokumentation.

Wenn Sie ein Beispiel mit einem vollständig angepassten Registrierungsformular mit Tailwind , Bulma , Bootstrap , Material oder einem anderen CSS -Framework sehen möchten, sehen Sie sich das offizielle Beispiel für ORUGA Multiframework an (Quellcode hier verfügbar) oder wenn Sie mit Tailwindcss 2 vertraut sind, geben Sie unsere offizielle Tailwindcs -Demo -Demo (Quellcode hier).

Verwenden von Oruga mit Nuxt

Oruga bietet derzeit kein Nuxt.js -Modul an.

Sie können das Nuxt.js -Plugins -System verwenden, das eine Datei (z. B. oruga.js ) in Ihrem plugins -Ordner hinzufügt, das enthält:

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

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

Um dieses Plugin in Ihrer App verfügbar zu machen, fügen Sie diese Datei dem plugins -Array in Ihrem nuxt.config.js hinzu

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

Um zu verstehen, wie die Plugins mit nuxt.js funktionieren, schauen Sie sich die NuxtJS -Plugin -Dokumentation an.

Schauen Sie sich das offizielle Beispiel von NuxtJS + ORUGA an.

Beitragen

Bitte beachten Sie die beitragenden Richtlinien.

Kontaktieren Sie uns?

→ Schließen Sie sich dem Oruga Discord Server bei.

Versioning

ORUGA verwendet Semantic Versioning 2.0.0 für Paketversionen.

Während es noch in der Beta ist, folgen Versionen diesem Muster: v0.yz , wo:

• Y : Major (Veränderungen brechen)
• Z : Moll oder Patch

Kernteam

Walter Tommasi

Andrea Stagi

Marcel Moravek

Mitwirkende

Vielen Dank an alle Beteiligten für die Verbesserung dieses Projekts, Tag für Tag

Komplette Liste.

Credits

ORUGA -Logo, das von Matteo Guadagnini entworfen wurde

ORUGA SVG -Bilder für Kontrollkästchen und Funkkomponenten und Feiertagen, die von Fabrizio Masini erstellt wurden

Lizenz

Code unter MIT -Lizenz veröffentlicht.