Material-ui: [ग्रिड] स्वचालित ऊंचाई समायोजन (उत्तरदायी लेआउट)

मुझे लगता है कि आप जो हासिल करने की कोशिश कर रहे हैं उसे उपयोगकर्ता भूमि पर लागू किया जा सकता है और एक जगह को लक्षित किया जा सकता है, उन कारणों से, मैं इस मुद्दे को बंद कर रहा हूं। आइए कोड आधार को सरल रखें।

मैं इस तथ्य को पूरी तरह से समझता हूं कि कोड का आधार सरल बना हुआ है, लेकिन सामग्री विनिर्देश घोषित करता है: "एकल-स्तंभ प्रारूप के तत्व विभिन्न संयोजनों में सामग्री क्षेत्र को भरने के लिए फिर से प्रवाहित हो सकते हैं।"

लेकिन वर्तमान में मैं ग्रिड के साथ जो सबसे अच्छा कर सकता हूं वह यह है:

तब मैं गंभीरता से सोचता हूं कि कार्यक्षमता होने पर एक कोड सरल रह सकता है

धन्यवाद,

पुनश्च: यदि आप विनिर्देश के समान परिणाम बनाने के लिए एक छोटा घटक जानते हैं, तो मुझे बताएं।
(लेकिन मुझे अभी भी लगता है कि सामग्री UI में एकीकरण सभी के लिए फायदेमंद होगा)

हो सकता है कि आप एक चिनाई पुस्तकालय की तलाश में हैं: https://masonry.desandro.com/layout.html।

हाँ, सामग्री UI में मूल एकीकरण की प्रतीक्षा करते समय यह एक अच्छा विचार है _{^{यदि यह एक दिन आता है :)}}

पुनश्च: क्या आप इस मुद्दे को फिर से खोलने पर विचार कर सकते हैं?

धन्यवाद,

यदि आपको इस सुविधा को एकीकृत करने के लिए सहायता की आवश्यकता है, तो मुझे लगता है कि आप यहां Google के सामग्री ढांचे के सीएसएस कोड पर सहायता ले सकते हैं

सामग्री ui निश्चित रूप से प्रतिक्रिया घटकों का सबसे अच्छा सेट है!

मुझे नहीं लगता कि getmdl यह कर सकता है, मैंने जांच नहीं की है लेकिन मुझे पूरा यकीन है कि आपके द्वारा प्रदान किया गया लिंक एक स्थिर उदाहरण है। गतिशील सामग्री के लिए, मैंने इसे केवल कोणीय सामग्री 2 ग्रिड सूची या कोणीय सामग्री 1 ग्रिड सूची में काम करते देखा है। लेकिन वे एक जटिल एल्गोरिदम का उपयोग करते हैं ...

हां, आप सही हैं, लेकिन मैंने कभी यह निर्दिष्ट नहीं किया कि डैशबोर्ड की सामग्री स्थिर नहीं होनी चाहिए
जाहिरा तौर पर, सामग्री कोणीय बहुत अच्छा करता है जो ग्रिड नहीं करता है ... लेकिन बहुत जटिल तर्क के साथ!

असल में, जो मैं समझता हूं, वह कुछ जिसे आप ग्रिड xs , sm , md , आदि के उत्तरदायी ब्रेक पॉइंट के साथ पहले ही कार्यान्वित कर सकते हैं।
यदि आपको कुछ "100%" स्वचालित की आवश्यकता है तो एक चिनाई पुस्तकालय आपकी आवश्यकता के लिए बेहतर अनुकूल होगा लेकिन यह परियोजना के दायरे से बाहर है।

हैलो @oliviertassinari ,
लेकिन ग्रिड के लिए सामग्री विनिर्देशों ? जैसा कि मैंने अपनी पिछली टिप्पणी में समझाया था?

मुझे समझ में नहीं आता कि मैं इसे ब्रेकपॉइंट्स के साथ कैसे कार्यान्वित कर सकता हूं, ग्रिड इसके आकार में संशोधन की अनुमति नहीं देता है! समस्या यहाँ है!

दूसरा संगीत कार्ड "एपरकू" कार्ड से चिपका हुआ क्यों नहीं जा सकता है? यह सामग्री विनिर्देश के विपरीत है।

अधिक सामान्य रूप से, ग्रिड उपयोगकर्ता को अपने कार्ड को अपनी इच्छानुसार रखने का विकल्प क्यों नहीं छोड़ता है?

मुझे आशा है कि आप मेरे अनुरोध को समझेंगे, और आप इस मुद्दे को फिर से खोलेंगे
और ईमानदारी से, मुझे नहीं लगता कि यह परियोजना के बाहर है, सामग्री। कोणीय ने इसे एकीकृत किया।

• विभिन्न ब्रेकप्वाइंट के लिए ग्रिड संरचना को बदलने के लिए आप withWidth() उच्च ऑर्डर घटक का उपयोग कर सकते हैं। ग्रिड फ्लेक्सबॉक्स मॉडल पर एक पतला आवरण है, जो कुछ भी यह लेआउट मॉडल करने की अनुमति देता है वह ग्रिड घटक के साथ प्राप्त किया जा सकता है।
• साथ ही, वांछित व्यवहार के लिए आप पंक्ति से कॉलम की दिशा बदल सकते हैं।

हम, मुझे लगता है कि मैं सामना करने में सक्षम होऊंगा, लेकिन अगर इस उदाहरण को शुरुआती लोगों के लिए एक ही प्रश्न पूछने के लिए दस्तावेज़ीकरण में जोड़ना संभव है?
मुझे इस बारे में सोचने की ज़रूरत है कि मैं अपने डैशबोर्ड को कैसे लागू करूँगा ... आपकी मदद के लिए धन्यवाद

अरे, मुझे भी यह सुविधा पसंद आएगी, और मुझे समझ में नहीं आया कि सुझाव के अनुसार इसे कैसे लागू किया जा सकता है। हैलोएडिट, क्या आपने इसे काम करने का प्रबंधन किया? क्या आप एक उदाहरण प्रदान कर सकते हैं? मुझे लगता है कि यह उपयोग मामला दस्तावेज़ीकरण में होना चाहिए।

अरे, मुझे कोई समाधान नहीं मिला (चिनाई जैसे बाहरी पुस्तकालय का उपयोग कर सकता है) लेकिन कोई भी मूल रूप से नहीं। मैं अभी भी इस सुविधा को मूल रूप से लागू करने के अपने विचार को बनाए रखता हूं!

हमने 2 कॉलम बनाए और डेटा को समान रूप से विभाजित किया। समस्या यह है कि यदि कॉलम में से एक सभी बड़े कार्डों के साथ समाप्त होता है, तो एक तरफ दूसरे की तुलना में लंबा हो सकता है।

मैं @HelloEdit से सहमत

मेरे ऐप में एक भी ग्रिड नहीं है जहां मैं चाहता हूं कि यह सामग्री-यूआई ग्रिड की तरह काम करे और आपका ग्रिड दस्तावेज पृष्ठ यह दिखाने के लिए बहुत सरल है कि यह आपके ग्रिड कैसे काम करता है, इसलिए मुझे इसका एहसास नहीं हुआ मेरे ऐप में इसे खोजने से पहले आपके ग्रिड की "फीचर" थी।

मैंने वही काम किया जैसा @ marco-silva0000 ने एक उदाहरण में किया था, लेकिन यह एक स्पष्ट हैक है और जब तक आपके आइटम एक ही आकार के बारे में नहीं हैं, तब तक यह नीचे भी बदसूरत दिखने की संभावना है।

कृपया फिर से खोलें @HelloEdit मैं मानता हूं कि यह एक बहुत बड़ी समस्या है, बशर्ते "समाधान" संतोषजनक नहीं है।
इसके अलावा, जैसा कि पहले कहा गया है, यह भौतिक दिशानिर्देशों का पालन नहीं करता है।

मैं समझता हूं कि आपके पास बहुत काम है और आपकी लाइब्रेरी अद्भुत है, लेकिन यदि आप पूरी तरह उत्तरदायी लेआउट को लागू करना चाहते हैं तो यह विशिष्ट बिंदु वास्तव में समस्याग्रस्त है।

उदाहरण लेआउट के लिए @oliviertassinari संभावित यहां ...

इस पर कोई प्रगति?

ग्रिड 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 मैं अपने आईपैड पर जो देख सकता हूं

संपादित करें डेस्कटॉप पर जाँच करने के बाद , इस समाधान के साथ कुछ समस्याएँ:

1. इसे ब्रेकप्वाइंट के आधार पर प्रतिक्रियाशील होने की आवश्यकता होगी जैसे कि ग्रिड अभी है।
2. मैंने मैककार्ड घटक में कुछ टाइपोग्राफी तत्व जोड़े (परिवर्तनीय ऊंचाई कार्ड अनुकरण करने के लिए, जो मेरा उपयोग मामला है), इसे लंबा बना रहा है। उसके बाद परिणाम में पंक्तियों के बीच ये अवांछित रिक्त स्थान हैं। इस प्रकार, यह सब के बाद काम नहीं करता है। नीचे स्क्रीनशॉट:
   

ग्रिड में चिनाई लेआउट समर्थन कमाल का होगा , सिद्धांत रूप में जेएस का उपयोग करना काम कर सकता है लेकिन आदर्श नहीं

css ग्रिड लेआउट इसके लिए अभिप्रेत नहीं है, देखें: https://github.com/w3c/csswg-drafts/issues/945

एक अस्थायी समाधान कॉलम बनाना होगा जैसा आप चाहते हैं और उन्हें फैला रहे हैं
उदाहरण के लिए
यहां मेरे पास दो कॉलम हैं और अगर उनकी कुंजी विषम है तो उन्हें विभाजित करें
और मोबाइल के लिए एक कॉलम में सभी के साथ 1 मुख्य ग्रिड
मैं smDown पर पहले वाले को छुपाता हूँ
और mdUp में मुख्य छुपाएं

इसके बारे में कुछ खबर?

जब फ्लेक्सबॉक्स का उपयोग करना आसान हो जाता है तो निश्चित रूप से एक समस्या होनी चाहिए।

@CloudNineK फ्लेक्सबॉक्स इस समस्या को हल नहीं करता है (ग्रिड फ्लेक्सबॉक्स आधारित है)। यदि आप सामग्री को अलग-अलग संख्या में स्तंभों के बीच समान रूप से वितरित करना चाहते हैं, तो आपको एक चिनाई वाली लाइब्रेरी का उपयोग करने की आवश्यकता है।

मैं केवल यह कहना चाहूंगा कि मैं एमयूआई से भी कुछ प्रकार की चिनाई की कार्यक्षमता देखना चाहता हूं। हो सकता है कि कार्यक्षमता का समर्थन करने के लिए MuiGrid को न बदलें, लेकिन हो सकता है कि एक नया घटक जोड़ें जो इसके बजाय इसका समर्थन करता हो। जैसे, मैंने एक चिनाई प्रभाव के लिए MuiGrid को लपेटने के लिए एक कच्चा घटक तैयार किया। मुझे उम्मीद है कि यह शायद एक घटक बनाने की शुरुआत हो सकती है?

यहाँ यह रुचि रखने वालों के लिए है: https://codesandbox.io/s/masonryplusmui-xk8rr?fontsize=14

बेशक समस्याएं हैं हालांकि। जिस तरह से यह वर्तमान में काम करता है वह यह है कि यह पूर्वनिर्धारित ब्रेकपॉइंट लेता है (मैं इसे थीम से खींचता हूं। ब्रेकपॉइंट्स.वैल्यू) और यह गणना करता है कि उसके आधार पर कितने कॉलम बनाना है। मुझे पता है कि एमयूआई के किसी भी घटक का व्यवहार ऐसा नहीं है, लेकिन इस बिंदु पर, मैं वास्तव में इस विधि के साथ पूरे कॉलम की चौड़ाई निर्धारित कर सकता हूं।

@weiluntong यह भी एक संभावित समाधान है, हालांकि मुझे नहीं लगता कि यह सुरुचिपूर्ण है
हो सकता है कि किसी को लैब को फोर्क करना चाहिए और एक नए घटक के रूप में इसके लिए एक जनसंपर्क या प्रस्ताव बनाना चाहिए

@nikandlv मैं

@weiluntong मुझे लगता है कि आप घटक के साथ सही रास्ते पर हैं, इसे शायद थोड़ा और काम करने की ज़रूरत है। हालांकि, आपको अनुरक्षकों से पूछना चाहिए कि क्या वे इसे एमयूआई के एक भाग के रूप में चाहते हैं या सिर्फ एक पुस्तकालय के रूप में जिसे आप प्रकाशित कर सकते हैं
और जैसा कि 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-window में भी Masonry घटक शामिल होने की संभावना नहीं है । शायद 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 के लिए समापन