bui

---

Eine React-Ökosystembibliothek zum Aufbau von Back-Office-Plattformen wie DD360.
Die Bibliothek wurde von Entwicklern für Entwickler erstellt

Stabiler v6

Dokumente • Website

? Installation

npm install dd360-ds

oder

yarn add dd360-ds

? Das Thema anpassen

Wenn Sie einen Anbieter verwenden möchten, um das Thema der Bibliothek zu konfigurieren, können Sie dies mit dem von DD360-DS bereitgestellten ThemeProvider tun. Auf diese Weise können Sie Ihre eigenen Einstellungen für das Thema festlegen.

Um den ThemeProvider zu verwenden, müssen Sie ihn wie folgt importieren:

 import { createTheme , ThemeProvider } from "dd360-ds/theme" ;

Sie können dann Ihre eigene Themenkonfiguration mit der Funktion createStheder erstellen, die ein Objekt mit unterschiedlichen Eigenschaften zum Anpassen des Themas akzeptiert. Beispielsweise können Sie die primären und sekundären Farben wie unten gezeigt definieren:

 const theme = createTheme ( {
  palette : {
    primary : {
      main : "purple"
    } ,
    secondary : {
      main : "#FFC107"
    }
  }
} ) ;

Nachdem Sie Ihre Themenkonfiguration erstellt haben, können Sie den ThemeProvider verwenden, um Ihre React -App zu wickeln. Dies kann wie folgt erfolgen:

 ReactDOM . createRoot ( document . getElementById ( "root" ) ) . render (
  < StrictMode >
    < ThemeProvider theme = { theme } >
      < App />
    </ ThemeProvider >
  </ StrictMode >
) ;

Innerhalb des ThemeProviders können Sie die von DD360-DS bereitgestellten Komponenten verwenden, und die entsprechenden Stile werden basierend auf Ihren Themeneinstellungen angewendet.

Denken Sie daran, dass Sie, um den ThemeProvider zu verwenden, sowohl die Kreatem-Komponente als auch die ThemeProvider-Komponente aus DD360-DS/-Thema importieren müssen.

Verwendung

Nach der Installation müssen Sie einige zusätzliche Konfigurationen vorstellen, damit alles normal funktioniert.

Importieren Sie Stylesheets in die App.js oder App.tsx

 import 'dd360-ds/dd360.css'

Euen Warnung: Wenn Sie es mit anderen Stilen kombinieren möchten, importieren Sie unsere CSS als letzte.

Wie importiere ich Komponenten?

 import { Button } from 'dd360-ds' 

? Komponenten

Dies ist der spaßigste Teil. Nachfolgend erläutern wir die Verwendung der Komponenten, die wir derzeit entwickeln.

Sie können hier überprüfen und zur DOCS -Website beitragen