bui

---

Uma biblioteca de ecossistema do React para criar plataformas de back-office como o DD360.
Sua biblioteca criada por desenvolvedores para desenvolvedores

V6 estável

DOCs • Site

? Instalação

npm install dd360-ds

ou

yarn add dd360-ds

? Personalize o tema

Se você deseja usar um provedor para configurar o tema da biblioteca, pode fazê-lo usando o ThemeProvider fornecido pelo DD360-DS. Isso permitirá que você defina suas próprias configurações para o tema.

Para usar o ThemeProvider, você deve importá -lo da seguinte forma:

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

Em seguida, você pode criar sua própria configuração de tema usando a função CreateTheme, que aceita um objeto com propriedades diferentes para personalizar o tema. Por exemplo, você pode definir as cores primário e secundário, como mostrado abaixo:

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

Depois de criar sua configuração de tema, você pode usar o ThemeProvider para envolver seu aplicativo React. Isso pode ser feito da seguinte forma:

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

Dentro do ThemeProvider, você pode usar os componentes fornecidos pelo DD360-DS e os estilos correspondentes serão aplicados com base nas configurações do seu tema.

Lembre-se de que, para usar o ThemeProvider, você deve importar o componente CreateTheme e o componente ThemeProvider do DD360-DS/tema.

Uso

Após a instalação, você terá que fazer algumas configurações extras para que tudo funcione normalmente.

IMPORT STILELES SHETS para o App.js ou App.tsx

 import 'dd360-ds/dd360.css'

️ Aviso: se você deseja combiná -lo com outros estilos, não deixe de importar nosso CSS como o último.

Como importar componentes?

 import { Button } from 'dd360-ds' 

? Componentes

Esta é a parte mais divertida. Abaixo, explicaremos o uso dos componentes que estamos desenvolvendo atualmente.

Você pode verificar e contribuir para o site do documento aqui