bui

---

Perpustakaan Ekosistem Bereaksi untuk membangun platform back-office seperti DD360.
Itu perpustakaan yang dibuat oleh pengembang untuk pengembang

V6 stabil

Dokumen • Situs web

? Instalasi

npm install dd360-ds

atau

yarn add dd360-ds

? Kustomisasi tema

Jika Anda ingin menggunakan penyedia untuk mengonfigurasi tema perpustakaan, Anda dapat melakukannya dengan menggunakan ThemeProvider yang disediakan oleh DD360-DS. Ini akan memungkinkan Anda untuk mengatur pengaturan Anda sendiri untuk tema.

Untuk menggunakan ThemeProvider, Anda harus mengimpornya sebagai berikut:

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

Anda kemudian dapat membuat konfigurasi tema Anda sendiri menggunakan fungsi CreateTheme, yang menerima objek dengan properti yang berbeda untuk menyesuaikan tema. Misalnya, Anda dapat menentukan warna primer dan sekunder seperti yang ditunjukkan di bawah ini:

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

Setelah membuat konfigurasi tema Anda, Anda dapat menggunakan ThemeProvider untuk membungkus aplikasi React Anda. Ini bisa dilakukan sebagai berikut:

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

Di dalam ThemeProvider, Anda dapat menggunakan komponen yang disediakan oleh DD360-DS dan gaya yang sesuai akan diterapkan berdasarkan pengaturan tema Anda.

Ingatlah bahwa untuk menggunakan ThemeProvider, Anda harus mengimpor komponen CreateTeMe dan komponen ThemeProvider dari DD360-DS/tema.

Penggunaan

Setelah instalasi, Anda harus membuat beberapa konfigurasi tambahan agar semuanya berfungsi secara normal.

Impor Stylesheets ke App.js atau App.tsx

 import 'dd360-ds/dd360.css'

️ Peringatan: Jika Anda ingin menggabungkannya dengan gaya lain, pastikan untuk mengimpor CSS kami sebagai yang terakhir.

Bagaimana cara mengimpor komponen?

 import { Button } from 'dd360-ds' 

? Komponen

Ini adalah bagian yang paling menyenangkan. Di bawah ini kami akan menjelaskan penggunaan komponen yang sedang kami kembangkan.

Anda dapat memeriksa dan berkontribusi ke situs web dokumen di sini