react paneless
1.0.0
Sebuah window manager minimal yang mungkin disertakan dalam aplikasi ReactJS Anda.
Saya sedang mengembangkan panelless untuk digunakan dalam aplikasi yang lebih besar. Saya ingin dapat menampilkan banyak jendela yang tumpang tindih. Setiap "jendela" disebut bingkai . Berikut adalah tangkapan layar dari satu bingkai aplikasi saya dengan lima panel .
Semua konten aplikasi dirender dalam panel.
Bingkai dapat diperkecil menjadi ukuran thumbnail.
Header bingkai (bilah judul AKA) dan footer (bilah status AKA) mungkin disembunyikan. Ketika header disembunyikan Anda masih dapat memindahkan frame dengan mengarahkan mouse di sekitar batas atasnya.
Panel dirender dalam bingkai.
Setiap panel dapat dipecah sehingga satu bingkai dapat berisi tata letak beberapa panel yang berubah-ubah.
Panel bertab diimplementasikan oleh perpustakaan ini.
Pustaka ini mendukung tata letak yang ada.
Garis biru menunjukkan bingkai/panel dengan fokus pengguna. Anda dapat menavigasi ketenaran dan panel dengan tombol Alt-f dan Alt-p. Alt-b akan mengaktifkan menu panel fokus. Menekan Alt-b lagi akan mengaktifkan menu frame terkait. Tombol panah digunakan untuk menavigasi item menu dan Escape (atau mengklik di mana saja di luar) menutup menu.
Garis luar biru yang menunjukkan panel fokus hanya muncul selama beberapa detik dan kemudian memudar agar tidak mengaburkan konten aplikasi di panel tersebut.
Sebuah bingkai diukur dengan mouse dengan mengarahkan kursor ke sudut kanan bawahnya.
Perkembangan awal. Sejauh ini hanya mencoba di Chrome.
Repositori ini menyertakan contoh aplikasi. Gambar di bawah adalah contoh aplikasi yang mengilustrasikan fitur.
Saya kira perlu juga disebutkan bahwa panelless melakukan rendering frame (normal dan diperkecil) dalam app-frame yang memiliki app-header dan app-footer .
Bilah tombol panel mana pun diekspos dengan mengarahkan mouse ke bagian atas panel.
Kloning repositori ini di direktori pada mesin Anda. Kemudian bermain-main saja dengan aplikasi contoh.
Atau, jika Anda sudah memiliki aplikasi yang ingin Anda sertakan, lakukan -
npm install <paneless-directory>
di mana <paneless-directory> adalah direktori tempat Anda mengkloning repositori ini.
Lihat contoh aplikasi.
MIT © BradDunagan
