المزود
DgaProviderيمثل DgaProvider جذر كل تطبيق @dev-dga: يضبط الاتجاه، الوضع الداكن، وسمة العلامة، ويستضيف البوابة لترث الطبقات المنبثقة هذه الإعدادات. غلف به تطبيقك مرة واحدة.
استورد ملف التنسيقات مرة واحدة (import '@dev-dga/css')، ثم غلف تطبيقك بـ DgaProvider واحد. يوفر المزود الاتجاه، الوضع الداكن، والسمة لكل المكونات، ومنها الطبقات المنبثقة.
متى تستخدمه
استخدم DgaProvider مرة واحدة في جذر تطبيقك بعد استيراد @dev-dga/css. اضبط dir="rtl" للعربية، وmode="dark" للوضع الداكن، وtheme لاختيار ألوان العلامة. تقرأ كل المكونات هذه القيم من المزود، حتى الحوارات والقوائم المعروضة في البوابات.
يمكنك وضع مزود داخل آخر لعرض معاينة تختلف عن الصفحة، مثل الأمثلة في هذا الموقع.
أمثلة
الخصائص
الخصائص التي يعرفها DgaProvider. سمات العنصر الأصلي تمر كما هي.
| الخاصية | النوع | الافتراضي | الوصف |
|---|---|---|---|
dir | "ltr" | "rtl" | ||
locale | string | ||
mode | "dark" | "light" | ||
theme | DgaTheme | Brand theme. theme.primary accepts a palette name ('lavender'),
any CSS color string ('#7C3AED', brand step 600; the other steps derive via
color-mix()), or an explicit { base, hover, active, foreground? }
triplet. In development, a color whose primary buttons fall below 4.5:1 warns once. The override-object pattern (style={{ '--ddga-color-primary': '...' }}) still works , style wins over theme. | |
as | DgaRootElement | ||
className | string | ||
style | react.CSSProperties | ||
childrenإلزامي | react.ReactNode |
إمكانية الوصول
يضبط المزود قيمة dir، لتتبع خوارزمية الاتجاه الثنائي في المتصفح والتقنيات المساعدة اتجاه القراءة. اضبط lang على المستند بنفسك ليبدل قارئ الشاشة صوته إلى العربية.
تظهر الطبقات المنبثقة داخل بوابة المزود، مما يجعلها ترث منه الاتجاه، السمة، وإعدادات التباين بدل إعدادات المستند الافتراضية.