bui

---

Une bibliothèque d'écosystème React pour construire des plates-formes de back-office comme DD360.
C'est une bibliothèque créée par les développeurs pour les développeurs

V6 stable

Docs • Site Web

? Installation

npm install dd360-ds

ou

yarn add dd360-ds

? Personnaliser le thème

Si vous souhaitez utiliser un fournisseur pour configurer le thème de la bibliothèque, vous pouvez le faire en utilisant le themeprovider fourni par DD360-DS. Cela vous permettra de définir vos propres paramètres pour le thème.

Pour utiliser le themeprovider, vous devez l'importer comme suit:

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

Vous pouvez ensuite créer votre propre configuration de thème à l'aide de la fonction CreateTheMe, qui accepte un objet avec différentes propriétés pour personnaliser le thème. Par exemple, vous pouvez définir les couleurs primaires et secondaires comme indiqué ci-dessous:

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

Après avoir créé votre configuration de thème, vous pouvez utiliser le themeprovider pour envelopper votre application React. Cela peut être fait comme suit:

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

Dans le themeprovider, vous pouvez utiliser les composants fournis par DD360-DS et les styles correspondants seront appliqués en fonction de vos paramètres de thème.

N'oubliez pas que pour utiliser le themeprovider, vous devez importer à la fois le composant CreateTheme et le composant ThemeProvider à partir de DD360-DS / le thème.

Usage

Après l'installation, vous devrez effectuer des configurations supplémentaires pour que tout fonctionne normalement.

Importez des feuilles de style dans l' App.js ou App.tsx

 import 'dd360-ds/dd360.css'

️ AVERTISSEMENT: Si vous souhaitez le combiner avec d'autres styles, assurez-vous d'importer notre CSS comme le dernier.

Comment importer des composants?

 import { Button } from 'dd360-ds' 

? Composants

C'est la partie la plus amusante. Ci-dessous, nous expliquerons l'utilisation des composants que nous développons actuellement.

Vous pouvez consulter et contribuer au site Web du document ici