مساهمة من جامعة نجران

مرحباً بك في

دليل كود المنصات | التصميم والتقنية

لنمكّن التجربة الرقمية بلغة تصميم موحّدة.

مساهمة من جامعة نجران توثّق آلية استخدام مكتبة كود المنصات ومكتبة جامعة نجران في تصميم وتطوير المنصات الرقمية.

تصفّح المكوّنات دليل التثبيت

استخدم المكتبة مع أدوات الذكاء الاصطناعي

توجيهات (برومتات) جاهزة على كل صفحة تنسخها إلى أداتك، فتحصل على تطبيق دقيق يلتزم بالمكتبة

ابدأ من هنا

المصممون

رحلة التصميم أصبحت أسهل مع أساسات جاهزة.

ابدأ بالأساسات

المطورون

دليل شامل لكل مكوّن بمعاينة حيّة وكود جاهز.

استكشف المكوّنات

لماذا Platformscode Core؟

المكتبة مُجمّعة ومهيّأة مسبقاً.

بدون بناء

ملفات جاهزة تُربط مباشرة.

ثنائي اللغة

عربي وإنجليزي مع دعم للاتجاهين.

مبني على Bootstrap

شبكة ومكوّنات Bootstrap 5.3.

التثبيت والإعداد

مساران: HTML وReact.

التثبيت في HTML

اربط ملفَّي التنسيقات في head.

HTML 
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/main.css">

للسلوك التفاعلي أضف حزمة Bootstrap.

HTML 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="config.js"></script>
<script src="js/core.js"></script>
<script src="js/dropdown.js"></script>

التثبيت في React

خطوتان في تبويبين.

ثبّت حزمة React.

bash 
npm install platformscode-new-react
npm install react react-dom   # إن لم يكونا مثبّتين

استورد المكوّن مباشرة.

JSX 
import { DgaButton } from 'platformscode-new-react';

export default function App() {
  return <DgaButton variant="primary-brand" label="Get started" />;
}

ترتيب التحميل مهم.

الدعم اللغوي

اضبط الاتجاه واللغة عبر config.js.

JS · config.js 
window.PFC_CONFIG = {
  direction: 'rtl',   // rtl للعربية · ltr للإنجليزية
  language: 'ar',     // ar · en
  theme: 'light',     // light · dark
  autoInit: true
};

جرّب زر تبديل اللغة أسفل القائمة الجانبية.