airframe next

Badan pesawat berikutnya

Templat dasbor / admin / analitik berkualitas tinggi yang berfungsi dengan baik pada smartphone, tablet, atau desktop apa pun. Tersedia sebagai open source sebagai lisensi MIT.

• Lihat demo
• versi jQuery
• Versi Bereaksi
• Versi Angular - Dokumentasi dalam Persiapan
• Versi Vue - Dokumentasi dalam Persiapan
• Versi MVC.NET - Dokumentasi dalam Persiapan
• Sketsa file (segera)

Perkenalan

Dasbor badan pesawat dengan desain minimalis dan UI ringan yang inovatif akan memungkinkan Anda membangun aplikasi yang luar biasa dan kuat dengan UI yang hebat. Dirancang dengan sempurna untuk aplikasi skala besar, dengan dokumentasi langkah demi langkah yang terperinci.

Proyek badan pesawat ini didasarkan pada NextJS - kerangka kerja populer yang dibuat untuk Bereaksi dengan dukungan rendering sisi server yang hebat. Termasuk reactstrap khusus untuk dukungan bootstrap. Topik apa pun yang tidak akan Anda temukan di sini mungkin dijelaskan dalam dokumentasi NextJS.

Catatan: Jika Anda ingin menggunakan proyek ini dalam produksi, Anda akan memerlukan server yang mendukung nodeJs.

Konfigurasi Awal:

Anda perlu memasang nodej (> = 10.0.0) di mesin lokal Anda, sebelum mencoba menjalankan lingkungan dev.

1. Ekstrak isi paket ke mesin lokal Anda.
2. Menggunakan terminal navigasi ke konten yang diekstraksi.
3. Jalankan npm install .

Pastikan Anda memiliki file yang disebut .npmrc di direktori yang diekstraksi. File -file tersebut biasanya disembunyikan dalam sistem berbasis UNIX.

Perkembangan

Untuk memulai pengembangan jenis lingkungan npm run dev di konsol. Ini akan memulai server pengembangan dengan pemuatan ulang panas diaktifkan.

Produksi

Anda dapat menggunakan skrip shell yang disertakan dengan paket. Jika Anda menggunakan sistem /dist UNIX ./build-dist.sh

Jika Anda tidak dapat menggunakan skrip shell, Anda perlu menyiapkan paket secara manual:

1. Jalankan npm run build
2. Salin konten tersebut ke mesin target
   • .next
   • static
   • package.json
   • .npmrc
3. Jalankan npm install di server tempat Anda menyalin konten di atas.
4. Anda sekarang dapat memulai aplikasi dengan menjalankan npm start

Bangun Kustomisasi

Anda dapat menambahkan fitur build tambahan dengan menambahkan plugin berikutnya dan mengkonfigurasinya di dalam file next.config.js .

Detail Proyek

Beberapa tempat menarik tentang struktur proyek proyek:

• components - Komponen reaksi global harus pergi ke sini
• styles - Gaya yang Ditambahkan Di Sini Tidak Akan Diperlakukan Sebagai Modul CSS, Jadi Kelas Global atau Gaya Perpustakaan HARUS DI SINI
• features - Komponen spesifik halaman harus ditemukan di sini
• features/Layout - Komponen AppLayout dapat ditemukan di sini yang meng -host konten halaman di dalam dirinya sendiri. Anda dapat mengubah komponen tata letak untuk setiap halaman.
• core/colors.js - Ekspor objek dengan semua warna yang ditentukan oleh dasbor. Berguna untuk menata komponen berbasis JS - misalnya grafik.
• pages - Komponen halaman harus ada di sini. NextJS akan secara otomatis memetakan nama file untuk merutekan URL.

Rute

Komponen rute harus ditempatkan di direktori terpisah di dalam /routes/ direktori. Selanjutnya Anda harus membuka /routes/index.js file dan melampirkan komponen. Anda dapat melakukan ini dengan dua cara yang berbeda:

Impor statis

Halaman yang diimpor secara statis akan dimuat dengan penuh semangat di atas pageload dengan semua konten lainnya. Tidak akan ada beban tambahan saat menavigasi ke halaman tersebut tetapi waktu pemuatan aplikasi awal juga akan lebih lama. Untuk menambahkan halaman yang diimpor secara statis itu harus dilakukan 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 >
    ) ;
} 

Rute

Sistem perutean ditangani oleh NextJS sendiri. Anda dapat menemukan dokumentasinya di sini - routing nextjs

Rute tata letak spesifik

Terkadang Anda mungkin ingin menampilkan konten tambahan di navbar atau sidebar. Untuk melakukan ini, Anda harus menentukan komponen tata letak yang disesuaikan untuk halaman tertentu. Contoh:

1. Buat komponen tata letak baru dalam features/layout . Ambil komponen LayoutDefault sebagai contoh.
2. Buka komponen halaman untuk rute tertentu. Misalnya pages/example-page.js .
3. Atur komponen tata letak khusus seperti ini:

 import React from 'react' ;

import { CustomLayout } from
    './../../features/Layout/CustomLayout' ;

const ExamplePage = ( ) => (
    { /* Page Content Here */ }
) ;
ExamplePage . layoutComponent = CustomLayout ;

export default ExamplePage ; 

Tema

Anda dapat mengatur skema warna untuk bilah samping dan navbar dengan menyediakan initialStyle dan initialColor ke komponen <ThemeProvider> yang harus membungkus komponen <Layout> .

Kemungkinan nilai initialStyle :

• lampu
• gelap
• warna

Kemungkinan Nilai initialColor :

• utama
• kesuksesan
• info
• peringatan
• bahaya
• nila
• ungu
• berwarna merah muda
• kuning

Mengubah tema programik

Anda dapat mengubah skema warna pada 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 :

• Gaya - gaya tema saat ini
• Warna - Warna Tema Saat Ini
• Onchangetheme ({style?, Color?}) - memungkinkan untuk mengubah tema