bui

---

مكتبة للنظام الإيكولوجي React لإنشاء منصات للمكتب الخلفي مثل DD360.
مكتبة أنشأها المطورين للمطورين

مستقر V6

مستندات • موقع الويب

؟ تثبيت

npm install dd360-ds

أو

yarn add dd360-ds

؟ تخصيص موضوع

إذا كنت ترغب في استخدام مزود لتكوين موضوع المكتبة ، فيمكنك القيام بذلك باستخدام themeProvider الذي توفره DD360-DS. سيسمح لك هذا بتعيين إعداداتك الخاصة للموضوع.

لاستخدام themeprovider ، يجب استيراده على النحو التالي:

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

يمكنك بعد ذلك إنشاء تكوين السمة الخاص بك باستخدام وظيفة CreateTheMe ، والتي تقبل كائن ذي خصائص مختلفة لتخصيص السمة. على سبيل المثال ، يمكنك تحديد الألوان الأولية والثانوية كما هو موضح أدناه:

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

بعد إنشاء تكوين السمة الخاص بك ، يمكنك استخدام themeProvider لالتفاف تطبيق React الخاص بك. يمكن القيام بذلك على النحو التالي:

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

داخل themeProvider ، يمكنك استخدام المكونات التي توفرها DD360-DS وسيتم تطبيق الأنماط المقابلة بناءً على إعدادات السمات الخاصة بك.

تذكر أنه لاستخدام themeProvider ، يجب عليك استيراد كل من مكون CreateTheMe ومكون thereProvider من DD360-DS/السمة.

الاستخدام

بعد التثبيت ، سيتعين عليك إجراء بعض التكوينات الإضافية لكل شيء للعمل بشكل طبيعي.

استيراد أوراق الأنماط في App.js أو App.tsx

 import 'dd360-ds/dd360.css'

️ تحذير: إذا كنت ترغب في الجمع بينه وأنماط أخرى ، فتأكد من استيراد CSS لدينا كآخر.

كيف تستورد المكونات؟

 import { Button } from 'dd360-ds' 

؟ عناصر

هذا هو الجزء الأكثر متعة. أدناه سنشرح استخدام المكونات التي نطورها حاليًا.

يمكنك التحقق والمساهمة في موقع المستندات هنا