airframe react
1.0.0
Catatan Versi HTML/CSS tersedia di sini: https://github.com/0wczar/airframe
Templat Dasbor / Admin / Analitik Berkualitas Tinggi yang berfungsi baik di ponsel cerdas, tablet, atau desktop apa pun. Tersedia sebagai Open Source dengan lisensi MIT.
Dasbor Badan Pesawat dengan desain minimalis dan UI Ringan yang inovatif akan memungkinkan Anda membangun aplikasi luar biasa dan kuat dengan UI hebat. Dirancang sempurna untuk aplikasi skala besar, dengan dokumentasi langkah demi langkah yang terperinci.
Proyek Airframe ini adalah aplikasi React berbasis Webpack yang khas, React Router juga disertakan bersama dengan reactstrap yang disesuaikan. Proyek ini memiliki sedikit dependensi yang mutakhir dan akan diperbarui secara berkala. Proyek ini tidak mendukung SSR. Jika Anda membutuhkannya - gunakan versi berbasis NextJs.
Airframe Dashboard memiliki banyak koleksi komponen yang dapat digunakan dalam banyak kombinasi dan variasi. Ini dapat digunakan di semua jenis aplikasi web khusus seperti CRM , CMS , Panel Admin , Dasbor Admin , Analisis , dll.
Tomasz Owczarczyk:
Anda harus menginstal NodeJs (>= 10.0.0) di mesin lokal Anda, sebelum mencoba menjalankan lingkungan dev.
npm install . Pastikan Anda memiliki file bernama .npmrc di direktori yang diekstrak. File-file tersebut biasanya disembunyikan di sistem berbasis Unix.
Untuk memulai lingkungan pengembangan, ketik npm start di konsol. Ini akan memulai server pengembangan dengan hot reload diaktifkan.
Untuk membuat tipe build produksi npm run build:prod . Setelah proses selesai Anda dapat menyalin output dari direktori /dist/ . File keluaran diperkecil dan siap digunakan dalam lingkungan produksi.
Anda dapat menyesuaikan build agar sesuai dengan kebutuhan spesifik Anda dengan menyesuaikan file konfigurasi Webpack. File-file tersebut dapat ditemukan di direktori /build . Untuk lebih jelasnya lihat dokumentasi WebPack.
Beberapa hal menarik tentang struktur proyek proyek:
app/components - komponen React khusus harus diletakkan di siniapp/styles - gaya yang ditambahkan di sini tidak akan diperlakukan sebagai Modul CSS, jadi kelas global atau gaya perpustakaan apa pun harus ditempatkan di siniapp/layout - komponen AppLayout dapat ditemukan di sini yang menampung konten halaman di dalamnya; sidebar dan navbar tambahan harus ditempatkan di subdir ./components/ .app/colors.js - mengekspor objek dengan semua warna yang ditentukan oleh Dasbor. Berguna untuk menata komponen berbasis JS - misalnya bagan.app/routes - PageComponents harus didefinisikan di sini, dan diimpor melalui index.js . Rincian lebih lanjut tentang itu nanti. Komponen rute harus ditempatkan di direktori terpisah di dalam direktori /routes/ . Selanjutnya Anda harus membuka file /routes/index.js dan melampirkan komponen. Anda dapat melakukannya dengan dua cara berbeda:
Halaman yang diimpor secara statis akan dimuat dengan cepat di PageLoad dengan semua konten lainnya. Tidak akan ada beban tambahan saat menavigasi ke halaman tersebut TETAPI waktu buka awal aplikasi juga akan lebih lama. Untuk menambahkan halaman yang diimpor secara statis, lakukan seperti ini:
// 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 >
) ;
} Halaman yang diimpor secara dinamis hanya akan dimuat saat dibutuhkan. Ini akan mengurangi ukuran pemuatan halaman awal dan membuat Aplikasi memuat lebih cepat. Anda dapat menggunakan React.Suspense untuk mencapai hal ini. Contoh:
// 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 >
) ;
} Terkadang Anda mungkin ingin menampilkan konten tambahan di Navbar atau Sidebar. Untuk melakukan ini, Anda harus menentukan komponen Navbar/Sidebar yang disesuaikan dan melampirkannya ke rute tertentu. Contoh:
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 >
) ; Anda dapat mengatur skema warna untuk sidebar dan navbar dengan memberikan initialStyle dan initialColor ke komponen <ThemeProvider> yang seharusnya membungkus komponen <Layout> .
Nilai initialStyle yang mungkin:
lightdarkcolor Nilai initialColor yang mungkin:
primarysuccessinfowarningdangerindigopurplepinkyellow Anda dapat mengubah skema warna saat runtime dengan menggunakan ThemeConsumer dari komponen. Contoh:
// ...
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 >
) ; Opsi yang disediakan oleh ThemeConsumer :
Plugin yang digunakan di dasbor ini:
