react spaces

Ruang Bereaksi

Sistem tata letak yang mudah dimengerti dan bersarang, Spaces React memungkinkan Anda untuk membagi halaman atau wadah menjadi ruang yang berlabuh, dapat digulir dan dapat diatur ulang yang memungkinkan Anda membangun antarmuka pengguna tipe desktop/seluler di browser.

Daripada perpustakaan komponen Visual UI, spasi dimaksudkan untuk menjadi blok dasar yang dapat digunakan kembali untuk meletakkan UI yang merespons dengan rapi untuk melihat pengucapan port membuat Anda mengisinya dengan komponen apa pun yang Anda inginkan.

• Tidak ada gaya untuk mencapai tata letak sederhana atau kompleks.
• Ruang tahu bagaimana berperilaku dalam kaitannya satu sama lain dan mengubah ukurannya sesuai.
• Ruang tidak memiliki elemen visual untuk mereka (bahkan bantalan atau margin). Anda dapat mengisinya dengan apa pun yang Anda inginkan.

Rilis Versi 0.2.0 - Baca catatan rilis di sini.

Lihat dokumentasi lengkap di sini.

Ruang tingkat atas

Digunakan di tingkat atas semua ruang lainnya.

<Viewport />

Ruang ini akan mengambil alih viewport lengkap jendela browser. Mengubah ukuran jendela browser akan secara otomatis menyesuaikan ukuran ruang ini dan semua ruang bersarang.

<Fixed />

Ruang ini dapat diberikan ketinggian dan secara opsional lebar (secara default akan mengukur hingga 100% dari wadahnya). Semua ruang bersarang akan terkandung dalam ruang ukuran tetap ini.

Ruang berlabuh

Ini dapat digunakan dalam ruang tingkat atas <viewport /> dan <fixed /> atau bersarang di dalam ruang lain.

<Kiri /> dan <kanan />

Ruang berlabuh di kiri atau kanan wadah/ruang induk. Ukuran dapat ditentukan dalam piksel atau sebagai persentase untuk menentukan lebarnya.

<Top /> dan <Bottom />

Ruang berlabuh ke bagian atas atau bawah wadah/ruang induk. Ukuran dapat ditentukan dalam piksel atau sebagai persentase untuk menentukan tingginya.

Ada versi yang dapat diatur ulang dari komponen -komponen ini yang disebut <leftresizable /> , <rightresizable /> , <topResizable /> dan <BottomResizable /> yang memungkinkan ruang diubah ukurannya dari tepi luar dengan menyeret dengan mouse.

Lainnya

<Fill />

Ruang yang mengkonsumsi area yang tersedia yang tersisa di wadah/ruang induk dengan mempertimbangkan ruang berlabuh di setiap sisi.

<Diposisikan />

Ruang yang benar -benar dapat ditempatkan di dalam ruang induk baik dengan atas, kiri, lebar dan tinggi atau di atas, kiri, kanan dan bawah.

<Layer />

Lapisan memungkinkan Anda untuk membuat lapisan dalam ruang induk, misalnya:

 < ViewPort >
	< Layer zIndex =" {0} " > < LeftResizable size =" 20% " /> // floating sidebar </ Layer >
	< Layer zIndex =" {1} " >
		< Fill />
	</ Layer >
</ ViewPort >

<Centered />

Memusatkan konten ruang secara horizontal dan vertikal.

<Centeredvertically />

Memusatkan konten ruang secara vertikal.

Memulai

Untuk memulai dengan ruang bereaksi yang Anda butuhkan:

 npm install react - spaces -- save 

 import * as Spaces from "react-spaces" ;

Lihat dokumentasi lengkap di sini.

Sumbangan

Jika Anda menemukan perpustakaan ini berguna, pertimbangkan untuk memberikan sumbangan kecil untuk mendanai secangkir kopi: