airframe react
1.0.0
ملاحظة: يتوفر إصدار HTML/CSS هنا: https://github.com/0wczar/airframe
قالب لوحة معلومات / إداري / تحليلات عالي الجودة يعمل بشكل رائع على أي هاتف ذكي أو جهاز لوحي أو سطح مكتب. متاح كمصدر مفتوح مثل ترخيص معهد ماساتشوستس للتكنولوجيا.
ستتيح لك لوحة معلومات Airframe ذات التصميم البسيط وواجهة المستخدم الخفيفة المبتكرة إنشاء تطبيق مذهل وقوي مع واجهة مستخدم رائعة. مصمم بشكل مثالي للتطبيقات واسعة النطاق، مع وثائق مفصلة خطوة بخطوة.
مشروع Airframe هذا هو تطبيق React نموذجي قائم على Webpack، كما تم تضمين React Router أيضًا مع حزام تفاعل مخصص. يحتوي هذا المشروع على جميع تبعياته القليلة محدثة وسيتم تحديثها على أساس منتظم. هذا المشروع لا يدعم SSR. إذا كنت في حاجة إليها - استخدم الإصدار المستند إلى NextJs.
تحتوي Airframe Dashboard على مجموعة ضخمة من المكونات التي يمكن استخدامها في عدد كبير من المجموعات والتنوعات. ويمكن استخدامه في جميع أنواع تطبيقات الويب المخصصة مثل CRMs و CMSs ولوحات الإدارة ولوحات تحكم الإدارة والتحليلات وما إلى ذلك.
توماس أوفكزارشيك:
يجب أن يكون لديك NodeJs (>= 10.0.0) مثبتة على جهازك المحلي، قبل محاولة تشغيل بيئة التطوير.
npm install . تأكد من وجود ملف يسمى .npmrc في الدليل المستخرج. عادةً ما تكون هذه الملفات مخفية في الأنظمة المستندة إلى Unix.
لبدء بيئة التطوير، اكتب npm start في وحدة التحكم. سيؤدي هذا إلى بدء تشغيل خادم التطوير مع تمكين إعادة التحميل السريع.
لإنشاء نوع بناء إنتاجي npm run build:prod . بعد اكتمال العملية يمكنك نسخ الإخراج من الدليل /dist/ . يتم تصغير ملفات الإخراج وجاهزة للاستخدام في بيئة الإنتاج.
يمكنك تخصيص التصميم ليناسب احتياجاتك الخاصة عن طريق ضبط ملفات تكوين Webpack. يمكن العثور على هذه الملفات في دليل /build . لمزيد من التفاصيل راجع وثائق WebPack.
بعض النقاط المثيرة للاهتمام حول هيكل مشروع المشروع:
app/components - يجب وضع مكونات React المخصصة هناapp/styles - لن يتم التعامل مع الأنماط المضافة هنا كوحدات CSS، لذا يجب وضع أي فئات عامة أو أنماط مكتبة هناapp/layout - يمكن العثور هنا على مكون AppLayout الذي يستضيف محتويات الصفحة داخل نفسه؛ يجب وضع أشرطة جانبية وأشرطة تنقل إضافية في ./components/ .app/colors.js - يصدر كائنًا بجميع الألوان المحددة بواسطة لوحة المعلومات. مفيد لتصميم المكونات المستندة إلى JS - على سبيل المثال المخططات.app/routes - يجب تعريف PageComponents هنا، واستيرادها عبر index.js . مزيد من التفاصيل حول ذلك لاحقا. يجب وضع مكونات المسار في مجلدات منفصلة داخل الدليل /routes/ . بعد ذلك، يجب عليك فتح ملف /routes/index.js وإرفاق المكون. يمكنك القيام بذلك بطريقتين مختلفتين:
سيتم تحميل الصفحات المستوردة بشكل ثابت على PageLoad مع كافة المحتويات الأخرى. لن يكون هناك أي تحميلات إضافية عند الانتقال إلى مثل هذه الصفحات ، ولكن وقت تحميل التطبيق الأولي سيكون أطول أيضًا. لإضافة صفحة مستوردة بشكل ثابت، يجب أن يتم ذلك على النحو التالي:
// Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /* Define the route for a specific path */ }
< Route path = "/some-page" exact component = { SomePage } />
{ /* ... */ }
</ Switch >
) ;
} لن يتم تحميل الصفحات المستوردة ديناميكيًا إلا عند الحاجة إليها. سيؤدي هذا إلى تقليل حجم التحميل الأولي للصفحة وجعل تحميل التطبيق أسرع. يمكنك استخدام React.Suspense لتحقيق ذلك. مثال:
// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React . lazy ( ( ) => import ( './SomeAsyncPage' ) ) ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /*
Define the route and wrap the component in a React.Suspense loader.
The fallback prop might contain a component which will be displayed
when the page is loading.
*/ }
< Route path = "/some-async-page" >
< React . Suspense fallback = { < PageLoader /> } >
< SomeAsyncPage />
</ React . Suspense >
</ Route >
</ Switch >
) ;
} في بعض الأحيان قد ترغب في عرض محتوى إضافي في شريط التنقل أو الشريط الجانبي. للقيام بذلك، يجب عليك تحديد مكون Navbar/Sidebar مخصص وإرفاقه بمسار معين. مثال:
import { SidebarAlternative } from './../layout/SidebarAlternative' ;
import { NavbarAlternative } from './../layout/NavbarAlternative' ;
// ...
export const RoutedNavbars = ( ) => (
< Switch >
{ /* Other Navbars: */ }
< Route
component = { NavbarAlternative }
path = "/some-custom-navbar-route"
/>
{ /* Default Navbar: */ }
< Route
component = { DefaultNavbar }
/>
</ Switch >
) ;
export const RoutedSidebars = ( ) => (
< Switch >
{ /* Other Sidebars: */ }
< Route
component = { SidebarAlternative }
path = "/some-custom-sidebar-route"
/>
{ /* Default Sidebar: */ }
< Route
component = { DefaultSidebar }
/>
</ Switch >
) ; يمكنك تعيين نظام الألوان للشريط الجانبي وشريط التنقل من خلال توفير initialStyle واللون initialColor لمكون <ThemeProvider> الذي يجب أن يغلف مكون <Layout> .
قيم initialStyle المحتملة:
lightdarkcolor قيم initialColor المحتملة:
primarysuccessinfowarningdangerindigopurplepinkyellow يمكنك تغيير نظام الألوان في وقت التشغيل باستخدام ThemeConsumer من المكونات. مثال:
// ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
< ThemeConsumer >
( { onChangeTheme } ) = > (
< React . Fragment >
< Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
Switch to Light
</ Button >
< Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
Switch to Dark
</ Button >
</ React . Fragment >
)
</ ThemeConsumer >
) ; الخيارات التي يوفرها ThemeConsumer :
المكونات الإضافية المستخدمة في لوحة التحكم هذه:
