Ikhtisar
Panel terpisah yang dapat diubah ukuran + Pembagian dinamis Drag & Drop untuk React
@byeolnaerim/flex-layoutadalah komponen React untuk dengan cepat membangun UI panel terpisah yang dapat diubah ukuran dan pembagian dinamis berbasis Drag & Drop.
Misalnya, jika ada kebutuhan untuk menyusun layar di mana sisi kiri adalah tampilan daftar produk toko dan sisi kanan adalah tampilan pratinjau pemakaian yang sebenarnya, dan setiap tampilan harus dapat diubah ukurannya, perpustakaan ini dapat memberikan ide yang baik.
Kisah asal
Pertama @byeolnaerim/flex-layoutlahir ketika saya adalah pengembang tahun kedua, saat saya mencoba membuat messenger bisnis berbasis vanilla js sebagai proyek pribadi.
Saya ingin itu dapat diubah ukuran satu sama lain seperti Slack atau vscode. Bagi saya, susunan tampilan kiri di vscode terlihat keren, jadi saya ingin apa yang saya buat berfungsi mirip dengan vscode.
Seiring waktu, saya mulai belajar React dan membuat ini kembali sebagai komponen berbasis typescript, rxjs, dan react. Dari fitur tampilan terpisah warisan yang dapat diubah ukuran dengan drag, saya memperluas fungsionalitas untuk membuat tampilan terpisah dinamis dengan Drag & Drop untuk memenuhi filosofi masa lalu saya, "Saya ingin itu berfungsi hampir mirip dengan vscode."
Normalisasi Pertumbuhan
@byeolnaerim/flex-layoutKetika saya pertama kali membuatFlexLayout berdasarkan flex-grow untuk tata letak indukFlexLayoutContainer sebagai batas atas jumlah kontainer anak dari total pertumbuhanmaxGrow, saya memahami bahwa proporsi setiap kontainer harus dinormalisasi di dalamnyanormalisasidan dibagikan. (Ini adalah interpretasi yang salah.)
Misalnya, jika ada 2 kontainer anak, max grow adalah 2, dan jika rasio 30% / 70%, maka grow yang sebenarnya harus 0.668 / 1.332, dan dengan asumsi itu, logika koreksi telah terakumulasi menjadi yang sekarang.@byeolnaerim/flex-layoutIni telah terjadi.