نظرة عامة
لوحات مقسمة قابلة للتغيير + تقسيمات ديناميكية تعتمد على السحب والإفلات لـ React
@byeolnaerim/flex-layoutهي مكون React مصمم لتكوين واجهة مستخدم لوحات مقسمة قابلة للتغيير وسرعة تقسيمات ديناميكية تعتمد على السحب والإفلات.
على سبيل المثال، عندما يكون هناك طلب لتكوين الشاشة بحيث تكون الجهة اليسرى عرض قائمة المنتجات في المتجر، والجهة اليمنى عرض المعاينة الفعلية، وعندما يجب أن تكون كل عرض قابلة للتغيير، يمكن أن توفر هذه المكتبة فكرة جيدة.
قصة الأصل
الأول @byeolnaerim/flex-layoutنشأت عندما كنت مطورًا في السنة الثانية، وكنت أحاول إنشاء تطبيق مراسلة للأعمال يعتمد على vanilla js كمشروع شخصي.
كنت أرغب في أن تكون كل المكونات قابلة للتغيير مثل Slack أو vscode. بدا لي تكوين العرض الأيسر في vscode رائعًا، لذا أردت أن يعمل ما أنشأته بطريقة مشابهة لـ vscode.
مع مرور الوقت، عندما بدأت في تعلم React، قمت بإعادة بناء هذا كمكون يعتمد على TypeScript و rxjs و React. من وظيفة العرض المقسم القديمة القابلة للتغيير بالسحب، قمت بتوسيع الوظيفة لإنشاء عرض ديناميكي بالسحب والإفلات، "كما لو كنت أرغب في أن يعمل بشكل مشابه جدًا لـ vscode".
تطبيع النمو
@byeolnaerim/flex-layoutعندما أنشأت لأول مرة، كنت أفكر في flex-grow كإطار عمل رئيسي للترتيبFlexLayout للحاويات الفرعيةFlexLayoutContainer كعدد كحد أقصى للنمو الكليmaxGrow, لفهم النسبة لكل حاوية كفكرة للتوزيع داخلها.normalize(كان هذا تفسيرًا خاطئًا.)
على سبيل المثال، إذا كان هناك حاويتان فرعيتان، فإن الحد الأقصى للنمو هو 2، وإذا كانت النسبة 30% / 70%، فإن النمو الفعلي يجب أن يكون 0.668 / 1.332، وقد تم بناء منطق التصحيح بناءً على هذا الافتراض.@byeolnaerim/flex-layoutلقد أصبح هذا.