rocket ui Download - rocket ui Quellcode herunterladen

rocket ui

Komponenten von Drittanbietern

v2.0.17

Herunterladen

? VERALTET

Diese Bibliothek wurde veraltet. Die Komponenten wurden mit den neuesten Materi-UI- und React-Versionen wiedergearbeitet und können hier gefunden werden: Rocket-UI

Für Dokumentation und aussagekräftige Beispiele finden Sie in der Gitbook-Dokumentation

Rocket-UI (veraltet)

Bit -Sammlung

Ein Satz wiederverwendbarer und komponierbarer React -Komponenten, die auf dem Material UI -Kern basieren, um schnelle und freundliche Webanwendungen zu entwickeln.

? ‍ Überprüfen Sie den Migrationshandbuch von Bit Legacy bis Bit Harmony -Version.

? Installation

NPMRC ist die NPM -Konfigurationsdatei. Um unsere Bibliothek zu verwenden, müssen Sie diese Datei konfigurieren.

‼ Überspringen Sie diesen Schritt, wenn das Projekt mit unserem WebApp -Raketengenerator generiert wird. Die .NPMRC -Datei ist bereits konfiguriert

Laufen

npm config set @totalsoft_oss:registry https://node.bit.cloud

Dieser Befehl fügt einen Eintrag in Ihre Root .npmrc -Datei hinzu. Wenn es nicht existiert, wird es einen erstellen.

- Eine Komponente installieren

Gehen Sie zur Hauptseite der Komponenten und wählen Sie den Befehl für den von Ihnen verwendeten Paketmanager aus. Sie können auch die Version auswählen, die Sie installieren möchten.

Führen Sie den Befehl in Ihrem Terminal aus und Sie sind bereit, ihn zu verwenden!

npm i @totalsoft_oss/rocket-ui.components.data-display.typography

- Installieren Sie alle Komponenten mit einem einzelnen Paket

Wenn Sie alle Komponenten in Ihrem Projekt in nur einem Paket haben möchten. Navigieren Sie in Bit -Cloud zu Kernkomponente.

Installieren Sie core durch Ausführen

npm i @totalsoft_oss/rocket-ui.core

Verwendung

    import React from 'react'
    import Typography from '@totalsoft_oss/rocket-ui.components.data-display.typography'
    /* example using core package
    import { Typography } from '@totalsoft_oss/rocket-ui.core'
    */

    const App = ( ) => {
        return (
            < Typography variant = 'body2' emphasis = 'bold' >
                "Text"
            </ Typography >
        )
    }

? Komponentenstruktur

Jede Komponente befindet sich in einem Abschnitt, der für ihren Zweck geeignet ist. Beispielsweise befinden sich alle in den Schaltflächen verwandten Komponenten im Ordner buttons . Alle Komponenten haben die gleiche Dateienstruktur. Wir implementieren und erzwingen diese Struktur, indem wir unseren eigenen Komponentengenerator erstellen, eine nach Bedarf bereitgestellte Funktionen. Wie Sie sehen werden, werden alle Komponenten und diejenigen, die mit der rocket-generator erstellt werden, die folgende Struktur enthält

index.js Eintragsdatei.
MyComponent.js Hauptdatei.
MyComponent.test.js Testdatei.
MyComponent.docs.mdx docs -Datei für die Komponente.
compositions Kompositionsordner.
- MyComponent.composition.js Kompositionen zur Simulation der Komponente in verschiedenen Zuständen und Kontexten.

? Leitfaden beitragen

Wir verwenden Bit für das Komponentenmanagement und den Beitrag. Bit ist ein Open-Source-Tool zum Komponieren von Komponenten-gesteuerten Software.

- Bit installieren

Es wird empfohlen, die Eingabeaufforderung anstelle von PowerShell aufgrund einiger Kompatibilitätsprobleme zu verwenden.

npm i -g @teambit/bvm

bvm install

Wenn bei der Installation Fehler auftritt, überprüfen Sie bitte den Abschnitt Fehlerbehebung.

- Lokaler Server starten

Nachdem das Bit erfolgreich installiert wurde, können Sie das Repository klonen und Bitfunktionalitäten in vollem Umfang verwenden.

Um sofort mit dem Eingabeaufforderung zu bit start und localhost zu öffnen: 3000. Es kann eine Weile dauern, bis Sie diesen Befehl zum ersten Mal erstellen, da er die gesamte Benutzeroberfläche für Ihre Entwicklungsumgebung erstellt. Wenn der lokale Server in Betrieb ist, werden alle Komponenten angezeigt und Sie können mit ihnen interagieren.

bit start

- Vorhandene Komponenten ändern

Nachdem Sie die Komponente entsprechend Ihren Anforderungen geändert/behoben haben, sollten Sie bit test durchführen, um sicherzustellen, dass alle Tests bestehen und mehr hinzufügen, wenn Ihre Änderungen erforderlich sind.

bit test

Wenn zusätzlich zu den Tests eine neue Funktion hinzugefügt wird, sollte auch ein Beispiel mit der neuen Funktionalität hinzugefügt werden. Die Beispieldateien befinden sich in jedem Komponentenverzeichnis im Verzeichnis compositions .

Nachdem Sie die Komponente geändert haben, müssen Sie bit status ausführen, um auf Bit -Related -Probleme zu überprüfen, und dann bit compile , um die neuesten Änderungen in Ihrer Benutzeroberfläche zu erhalten.

bit status

bit compile

- Hinzufügen einer neuen Komponente

Zum Erstellen einer neuen Komponente sollten Sie unseren eigenen Komponentengenerator, rocket-generator , verwenden, der eine Vorlage bietet, die bei der Implementierung einer neuen Komponente hilfreich ist.

bit create rocket-generator components/buttons/my-component

- Pull -Anfrage öffnen

Wenn Ihre Änderung/Funktion/Fix erledigt ist und Sie markieren möchten, welche Komponenten veröffentlicht werden, sind die nächste Version und eine Changelog -Nachricht verwendet -Soft -Option.