Aperçu
Panneaux divisés redimensionnables + Splits dynamiques Drag & Drop pour React
@byeolnaerim/flex-layoutest un composant React pour configurer rapidement une interface utilisateur de panneaux divisés redimensionnables et des splits dynamiques basés sur Drag & Drop.
Par exemple, si vous souhaitez configurer l'écran avec une vue de liste de produits à gauche et une vue d'aperçu réel à droite, et que chaque vue doit être redimensionnable, cette bibliothèque peut offrir une bonne solution.
Histoire d'origine
Le premier @byeolnaerim/flex-layoutest né lorsque j'étais développeur en deuxième année et que j'essayais de créer un messager d'affaires basé sur vanilla js comme projet personnel.
Je voulais qu'il soit redimensionnable entre les différentes sections, comme Slack ou vscode. La configuration de la vue à gauche de vscode me semblait cool, donc je voulais que ce que j'avais créé fonctionne de manière similaire à vscode.
Avec le temps, lorsque j'ai commencé à apprendre React, j'ai recréé cela en tant que composant basé sur TypeScript, rxjs et react. J'ai étendu la fonctionnalité de vue divisée dynamique avec Drag & Drop pour réaliser ma philosophie passée de "vouloir que cela fonctionne presque comme vscode" à partir de la fonctionnalité de vue divisée héritée redimensionnable.
Normalisation de la croissance
@byeolnaerim/flex-layoutLorsque j'ai créé pour la première fois, je pensais que le flex-grow était basé sur la mise en page parente.FlexLayout Les conteneurs enfantsFlexLayoutContainer sont compris comme le nombre total de croissances.maxGrow, et que le ratio de chaque conteneur devait être normalisé à l'intérieur.normaliserC'était une mauvaise interprétation.
Par exemple, si le conteneur enfant a 2 éléments, max grow est 2, et si le ratio est de 30% / 70%, alors le grow réel devrait être de 0.668 / 1.332, et sur cette hypothèse, les logiques de correction se sont accumulées pour arriver à ce qui est maintenant.@byeolnaerim/flex-layoutC'est devenu.