Material-ui: [الشبكة] ضبط الارتفاع التلقائي (تخطيط سريع الاستجابة)

لدي شعور بأن ما تحاول تحقيقه يمكن تنفيذه على أرض المستخدمين واستهداف مكانة متخصصة ، لهذه الأسباب ، أقوم بإغلاق المشكلة. دعنا نحافظ على بساطة قاعدة الشفرة.

أنا أفهم تمامًا حقيقة أن أساس الكود ظل بسيطًا ، لكن مواصفات المواد تعلن: "قد يتم إعادة تدفق العناصر من تنسيق أحادي العمود لملء منطقة المحتوى في مجموعات مختلفة."

لكن أفضل ما يمكنني فعله حاليًا باستخدام Grid هو:

ثم أعتقد بجدية أن الكود يمكن أن يظل بسيطًا مع وجود وظائف

شكر،

ملاحظة: إذا كنت تعرف مكونًا صغيرًا لتحقيق نفس النتيجة مثل المواصفات ، فيرجى إبلاغي بذلك.
(ولكن ما زلت أعتقد أن التكامل في واجهة المستخدم المادية سيكون مفيدًا للجميع)

ربما كنت تبحث عن مكتبة للبناء: https://masonry.desandro.com/layout.html.

نعم ، هذه فكرة جيدة أثناء انتظار التكامل الأصلي في واجهة المستخدم المادية _{^{إذا حدث ذلك يومًا ما :)}}

ملاحظة: هل يمكنك التفكير في إعادة فتح القضية؟

شكر،

إذا كنت بحاجة إلى مساعدة لدمج هذه الميزة ، أعتقد أنه يمكنك الحصول على دعم بشأن كود CSS الخاص بالإطار المادي لـ Google هنا

واجهة المستخدم المادية هي بالتأكيد أفضل مجموعة من مكونات React!

لا أعتقد أن getmdl يمكنه فعل ذلك ، لم أتحقق من ذلك ، لكنني متأكد تمامًا من أن الرابط الذي قدمته هو مثال ثابت. بالنسبة للمحتوى الديناميكي ، فقد رأيته يعمل فقط في قائمة شبكة المواد الزاويّة 2 أو المواد الزاويّة 1 . لكنهم يستخدمون خوارزمية معقدة ...

نعم ، أنت على حق ، لكنني لم أحدد مطلقًا أن محتويات لوحة القيادة يجب ألا تكون ثابتة 😄
على ما يبدو ، فإن المادة الزاويّة تؤدي أداءً جيدًا ما لا تفعله الشبكة ... ولكن بمنطق معقد جدًا!

في الواقع ، مما أفهمه ، أن شيئًا ما يمكنك تنفيذه بالفعل باستخدام نقاط التوقف المتجاوبة للشبكة xs ، sm ، md ، إلخ.
إذا كنت بحاجة إلى شيء آلي "100٪" ، فستكون مكتبة البناء مناسبة بشكل أفضل لاحتياجاتك ولكنها خارج نطاق المشروع.

مرحبا oliviertassinari ،
لكن مواصفات المواد للشبكة؟ كما شرحت في تعليقي السابق؟

لا أفهم كيف يمكنني تنفيذه بنقاط التوقف ، فالشبكة لا تسمح بتعديل حجمها! المشكلة هنا!

لماذا لا يمكن أن تظل البطاقة الموسيقية الثانية ملتصقة ببطاقة "aperçu"؟ هذا مخالف لمواصفات المواد.

بشكل عام ، لماذا لا تترك الشبكة الخيار للمستخدم لوضع بطاقاته كما يشاء؟

أتمنى أن تفهم طلبي وأن تعيد فتح المشكلة
وبصدق لا أظن أن هذا خارج المشروع المادي. الشكل المندمج فيه.

• يمكنك استخدام مكون الترتيب الأعلى withWidth() لتغيير هيكل الشبكة لنقاط التوقف المختلفة. الشبكة عبارة عن غلاف نحيف فوق نموذج flexbox ، أي شيء يسمح به نموذج التخطيط هذا يمكن تحقيقه باستخدام مكون الشبكة.
• أيضًا ، يمكنك تغيير الاتجاه من صف إلى عمود للحصول على السلوك المطلوب.

همهمة ، أعتقد أنني سأكون قادرًا على التأقلم ، لكن إذا كان من الممكن إضافة هذا المثال في الوثائق للمبتدئين الذين يطرحون نفس السؤال؟
أحتاج إلى التفكير في كيفية تنفيذ لوحة التحكم الخاصة بي ... شكرًا لك على مساعدتك

مرحبًا ، أود أيضًا هذه الميزة ، ولم أفهم كيف يمكن تنفيذها على النحو المقترح. HelloEdit ، هل تمكنت من الحصول على هذا العمل؟ يمكن أن توفر لنا مثالا؟ أعتقد أن حالة الاستخدام هذه يجب أن تكون في الوثائق.

مرحبًا ، لم أجد حلاً (استخدم مكتبة خارجية مثل البناء الذي يمكن أن يعمل) ولكن لا شيء محليًا. ما زلت أحافظ على فكرتي لتنفيذ هذه الميزة أصلاً!

انتهى بنا الأمر بإنشاء عمودين وتقسيم البيانات بالتساوي. تكمن المشكلة في أنه إذا انتهى أحد الأعمدة بجميع البطاقات الأكبر حجمًا ، فقد يكون جانب واحد أطول من الآخر.

أنا أتفق مع HelloEdit . هذه مشكلة كبيرة لا يتم تضمينها في الشبكة. أشعر بالإحباط إلى الأبد من استخدام شبكة Material-UI في المقام الأول ، فلماذا أرغب في استخدام شبكة تبدو سيئة مع فجوات قبيحة في معظم الأوقات ولا تتبع مواصفات Material-UI؟

ليس لدي شبكة واحدة في تطبيقي حيث أرغب في أن تعمل مثل شبكة Material-UI وصفحة توثيق الشبكة الخاصة بك مبسطة للغاية لإظهار أن هذه هي الطريقة التي تعمل بها شبكاتك ، لذلك لم أدرك ذلك كانت "ميزة" في شبكتك قبل اكتشافها في تطبيقي.

لقد فعلت نفس الشيء الذي فعلته @ marco-silva0000 في حالة واحدة ، لكنه اختراق واضح وما لم تكن جميع العناصر الخاصة بك بنفس الحجم فمن المحتمل أن تبدو قبيحة في الأسفل أيضًا.

الرجاء إعادة فتح HelloEdit ، أوافق على أن هذه مشكلة كبيرة ، "الحل" المقدم ليس مرضيًا.
علاوة على ذلك ، كما ذكر من قبل ، فإنه لا يتبع الإرشادات المادية.

أتفهم أن لديك الكثير من العمل ومكتبتك رائعة ، لكن هذه النقطة المحددة تمثل مشكلة حقًا إذا كنت تريد تنفيذ تخطيط سريع الاستجابة بالكامل.

oliviertassinari المحتملة هنا للحصول على مثال تخطيط ...

أي تقدم في هذا؟

يمكن تعيين خاصية Grid rowHeight يدويًا أو افتراضياً أن تكون 1: 1. إذا عرضنا بطاقة يتم تكرار البيانات الديناميكية بداخلها ، فلن يتم ضبط الارتفاع.

1. الحالة 1 ، إذا كانت البطاقة تحتوي على 5 بيانات وكانت هناك بياناتان فقط ، فسيتم تعديل ارتفاع البطاقة ولكن يظل ارتفاع الشبكة 1: 1.
2. الحالة 2 ، إذا كانت البطاقة تحتوي على 5 قيم ولكن 7 موجودة ، فسيتم قطع البيانات المتبقية ولا يتم عرضها على الشاشة أبدًا.

إذا كان أي حل لهذه المشكلة متاحًا ، فهل نقدر الحصول على مثال؟ تصويتي تجاه الدعم المحلي. أعتقد أن هذا نوع من الوظائف الأساسية لمكون الشبكة.

هل شيء مثل هذا ما تريده: https://codesandbox.io/s/p5v42zrrzm
يتم تشغيله بواسطة شبكة CSS لذا لا يمكن استخدامه في كل مكان: https://caniuse.com/#feat = css-grid

joshwooding بناءً على ما يمكنني رؤيته على جهاز iPad ، يبدو جيدًا جدًا! سوف تحقق غدا على سطح المكتب.

قم بالتحرير بعد التحقق من سطح المكتب ، هناك مشكلتان في هذا الحل:

1. يجب أن يكون هذا مستجيبًا استنادًا إلى نقاط التوقف تمامًا كما هو الحال الآن في الشبكة.
2. لقد أضفت عنصرين من عناصر الطباعة إلى مكون MacCard (لمحاكاة بطاقات الارتفاع المتغير ، وهي حالة الاستخدام الخاصة بي) ، مما يجعلها أطول. بعد ذلك ، تحتوي النتيجة على هذه المساحات الفارغة غير المرغوب فيها بين الصفوف. وبالتالي ، هذا لا يعمل بعد كل شيء. لقطة الشاشة أدناه:
   

سيكون دعم تخطيط البناء في الشبكة رائعًا ، من الناحية النظرية ، يمكن أن يعمل استخدام JS ولكن ليس مثاليًا

تخطيط شبكة css غير مخصص لهذا الغرض ، راجع: https://github.com/w3c/csswg-drafts/issues/945

الحل المؤقت هو إنشاء أعمدة كما تريد ونشرها
على سبيل المثال
هنا لدي عمودين وأقسمهما إذا كان مفتاحهما فرديًا
وشبكة رئيسية واحدة مع الكل في عمود واحد للجوال
أخفي أول واحد على smDown
وإخفاء الملف الرئيسي في mdUp

بعض الأخبار عن هذا؟

عندما يكون من الأسهل استخدام flexbox فقط ، فمن المؤكد أن هناك مشكلة.

CloudNineK Flexbox لا يحل هذه المشكلة (الشبكة تعتمد على flexbox). تحتاج إلى استخدام مكتبة بناء إذا كنت ترغب في توزيع المحتوى بالتساوي بين عدد متفاوت من الأعمدة.

أود فقط أن أقول إنني أرغب في رؤية نوع من وظائف البناء من MUI أيضًا. ربما لا تغير MuiGrid لدعم الوظيفة ، لكن ربما تضيف مكونًا جديدًا يدعمها بدلاً من ذلك. على هذا النحو ، قمت برسم مكون خام لتغليف MuiGrid لتأثير الماسونية. آمل أن يكون هذا ربما بداية لإنشاء مكون؟

ها هو للمهتمين: https://codesandbox.io/s/masonryplusmui-xk8rr؟

بالطبع هناك مشاكل بالرغم من ذلك. الطريقة التي تعمل بها حاليًا هي أنها تأخذ نقاط توقف محددة مسبقًا (أسحبها من theme.breakpoints.values) وتحسب عدد الأعمدة التي يجب إنشاؤها بناءً على ذلك. أعلم أن هذه ليست الطريقة التي يتصرف بها أي من مكونات MUI ، ولكن في هذه المرحلة ، يمكنني فقط تعيين عرض العمود بأكمله بهذه الطريقة.

weiluntong هذا أيضًا حل ممكن ولكن لا أعتقد أنه أنيق
ربما يجب على شخص ما أن يتفرع من المختبر ويصنع علاقات عامة أو مقترحًا لهذا كمكون جديد

nikandlv أتفق معك تمامًا. في الوقت الحالي ، أصبح الشيء في حالة من النسيان حيث لا يكون MUI تمامًا كما أنه ليس تخطيطًا للبناء تمامًا. سأكون أكثر من سعيد لإنشاء عنصر وإنشاء العلاقات العامة. في الواقع ، هذا ما كنت آمل أن يكون هدفي النهائي هنا ، لكنني أنشأت صندوق الحماية لأنني لم أكن متأكدًا من أين سأبدأ. مرة أخرى ، كنت أتمنى أن تكون البداية؟ أم أنني تركت المجال تمامًا فيما يتعلق بالهيكل الأساسي للمكون؟ أرغب في الحصول على معلومات تجعلني أذهب.

weiluntong أعتقد أنك على المسار الصحيح مع المكون ، ربما يحتاج إلى مزيد من العمل. ومع ذلك ، يجب أن تسأل المشرفين عما إذا كانوا يريدون هذا كجزء من MUI أو كمكتبة يمكنك نشرها
وكما يقول https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md

عند إرسال مكون جديد ، يرجى إضافته إلى المختبر.

https://github.com/mui-org/material-ui/tree/master/packages/material-ui-lab

سنحتاج إلى مزيد من الأصوات المؤيدة للقضية للنظر في حل المشكلة.

إذا كنت لا تزال تشعر بأن لديك الوقت لإعداد اقتراح weiluntong ، فقد أدلي بصوتي تجاه مكون منفصل مخصص للبناء . قد يكون الخيار الأسهل للصيانة والاستخدام.

كنت أستخدم المكون react-virtualized Masonry . ومع ذلك ، لا يعمل react-virtualized مع أحدث babel و core-js . يبدو أنه من غير المحتمل أن يشتمل خليفته react-virtualized Masonry وتبنيه في material-ui ؟

لا أمانع في وضع اقتراح حيث يمكننا دمج الأصوات المؤيدة. هل يوجد نموذج اقتراح يجب علي استخدامه؟

weiluntong أعتقد أنه https://github.com/mui-org/material-ui/blob/master/CONTRIBUTING.md يجب عليك إرسال مشكلة ووصف طلب المكون هناك وطلب الأصوات المؤيدة

weiluntong يوجد نموذج عند إنشاء عدد جديد.

صححني إذا فقدت شيئًا ما ، لكنني تمكنت من حل ما يبدو أنه هذه المشكلة بالضبط من خلال تطبيق هذا الحل من تجاوز سعة المكدس:
Simply apply height: 100% to the children of Grid items.
https://stackoverflow.com/questions/50743402/material-ui-grid-item-height

هذا ليس هو الحال @ dylanmartin ، نحن لا نريد أن يمتد ، نريد أن يملأ الصف التالي هذه الفجوة!

الإغلاق لـ # 17000