airframe react
1.0.0
หมายเหตุ เวอร์ชัน HTML/CSS มีอยู่ที่นี่: https://github.com/0wczar/airframe
เทมเพลตแดชบอร์ด / ผู้ดูแลระบบ / การวิเคราะห์ คุณภาพสูงที่ใช้งานได้ดีบนสมาร์ทโฟน แท็บเล็ต หรือเดสก์ท็อป มีให้เป็น โอเพ่นซอร์สเป็นใบอนุญาต MIT
Airframe Dashboard พร้อมการออกแบบที่เรียบง่ายและ Light UI ที่เป็นนวัตกรรมใหม่จะช่วยให้คุณสร้างแอปพลิเคชันที่น่าทึ่งและทรงพลังพร้อม UI ที่ยอดเยี่ยม ออกแบบมาอย่างสมบูรณ์แบบสำหรับการใช้งานขนาดใหญ่ พร้อมเอกสารประกอบโดยละเอียดทีละขั้นตอน
โปรเจ็กต์ Airframe นี้เป็นแอป React ที่ใช้ Webpack ทั่วไป โดยมี React Router รวมอยู่ด้วยพร้อมกับ Reactstrap ที่ปรับแต่งเอง โปรเจ็กต์นี้มีการขึ้นต่อกันเล็กน้อยทั้งหมดเป็นปัจจุบัน และจะมีการอัปเดตเป็นประจำ โครงการนี้ไม่รองรับ SSR หากคุณต้องการ - ใช้เวอร์ชันที่ใช้ NextJs
Airframe Dashboard มีส่วนประกอบจำนวนมากที่สามารถนำมาใช้ผสมและรูปแบบต่างๆ มากมาย สามารถใช้ได้กับเว็บแอปพลิเคชันที่กำหนดเองทุกประเภท เช่น CRM , CMS , แผงผู้ดูแลระบบ , แดชบอร์ดผู้ดูแลระบบ , การวิเคราะห์ ฯลฯ
โทมัสซ์ ออวซาร์ซิค:
คุณต้องติดตั้ง NodeJs (>= 10.0.0) บนเครื่องของคุณก่อนที่จะพยายามเรียกใช้สภาพแวดล้อม dev
npm install ตรวจสอบให้แน่ใจว่าคุณมีไฟล์ชื่อ .npmrc ในไดเร็กทอรีที่แยกออกมา โดยทั่วไปไฟล์เหล่านั้นจะถูกซ่อนอยู่ในระบบที่ใช้ Unix
หากต้องการเริ่มสภาพแวดล้อมการพัฒนา ให้พิมพ์ npm start ในคอนโซล สิ่งนี้จะเริ่มต้นเซิร์ฟเวอร์การพัฒนาโดยเปิดใช้งานการโหลดซ้ำแบบร้อน
หากต้องการสร้างบิลด์การผลิตให้พิมพ์ npm run build:prod หลังจากกระบวนการเสร็จสมบูรณ์ คุณสามารถคัดลอกเอาต์พุตจากไดเร็กทอรี /dist/ ได้ ไฟล์เอาต์พุตจะถูกย่อขนาดและพร้อมใช้งานในสภาพแวดล้อมการใช้งานจริง
คุณสามารถปรับแต่งบิลด์ให้เหมาะกับความต้องการเฉพาะของคุณโดยการปรับไฟล์คอนฟิกูเรชัน Webpack ไฟล์เหล่านั้นสามารถพบได้ในไดเร็กทอรี /build สำหรับรายละเอียดเพิ่มเติมโปรดดูเอกสารประกอบของ WebPack
จุดสนใจบางส่วนเกี่ยวกับโครงสร้างโครงการโครงการ:
app/components - ส่วนประกอบ React แบบกำหนดเองควรอยู่ที่นี่app/styles - สไตล์ที่เพิ่มที่นี่จะไม่ถือเป็นโมดูล CSS ดังนั้นคลาสสากลหรือสไตล์ไลบรารีควรอยู่ที่นี่app/layout - ส่วนประกอบ AppLayout สามารถพบได้ที่นี่ ซึ่งโฮสต์เนื้อหาของหน้าภายในตัวมันเอง แถบด้านข้างและแถบนำทางเพิ่มเติมควรอยู่ใน ./components/ subdirapp/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 หรือแถบด้านข้าง ในการดำเนินการนี้ คุณควรกำหนดส่วนประกอบ 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 :
ปลั๊กอินที่ใช้ในแดชบอร์ดนี้:
