Tổng quan
Các panel chia có thể thay đổi kích thước + Kéo & Thả chia động cho React
@byeolnaerim/flex-layoutlà một component React để nhanh chóng cấu hình UI panel chia có thể thay đổi kích thước và chia động dựa trên Kéo & Thả.
Ví dụ, khi có yêu cầu cấu hình màn hình với bên trái là danh sách sản phẩm của cửa hàng và bên phải là xem trước thực tế, và mỗi view cần có khả năng thay đổi kích thước, thư viện này có thể cung cấp một ý tưởng tốt.
Câu chuyện nguồn gốc
Thư viện đầu tiên @byeolnaerim/flex-layoutđược sinh ra khi tôi là một lập trình viên năm thứ hai, khi tôi cố gắng tạo một messenger cho doanh nghiệp dựa trên vanilla js như một dự án cá nhân.
Tôi muốn nó có thể thay đổi kích thước giữa các thành phần giống như Slack hoặc vscode. Tôi thấy cấu hình view bên trái của vscode rất đẹp, vì vậy tôi muốn những gì tôi tạo ra hoạt động giống như vscode.
Thời gian trôi qua, khi tôi lần đầu tiên bắt đầu với React, tôi đã tái tạo nó thành một component dựa trên typescript, rxjs, react. Từ chức năng view chia tách có thể thay đổi kích thước của các legacy hiện có, tôi đã mở rộng chức năng tạo view chia động bằng Kéo & Thả để thực hiện triết lý quá khứ của tôi "muốn nó hoạt động gần giống như vscode".
Chuẩn hóa Grow
@byeolnaerim/flex-layoutKhi tôi lần đầu tiên tạo ra , tôi đã hiểu rằng flex-grow dựa trên layout chaFlexLayout và số lượng container conFlexLayoutContainer là giới hạn tối đa cho tổng growmaxGrow, và tỷ lệ của mỗi container cần được chuẩn hóa trong đó.normalize(Đây là một cách hiểu sai.)
Ví dụ, nếu có 2 container con, max grow là 2, với tỷ lệ 30% / 70% thì grow thực tế phải là 0.668 / 1.332, và dưới giả định đó, các logic điều chỉnh đã tích lũy thành hiện tại.@byeolnaerim/flex-layoutĐã trở thành như vậy.