में कार्ड के क्लिक पर लहर प्रभाव जोड़ने के लिए कैसे कोई तरीका है मैं क्लिक पर सामग्री-UI कार्ड घटक पर लहर प्रभाव जोड़ सकता हूं।सामग्री-यूई
http://www.material-ui.com/#/components/card
और मैं भी जानना चाहते हैं, यह संभव कार्ड घटक के सामग्री के शीर्ष पर आने के लिए, बल्कि यह है कि यह पृष्ठभूमि के रूप में दिखा असर बनाना है।
मैं इस सवाल को देख सकते हैं उत्तर नहीं दिया गया, तो मैं एक अप-टू-डेट समाधान (लेखन इस material-ui के रूप में वी है प्रदान करेंगे 0.18। .7 (स्थिर):
आप तरंग उच्च क्रम कंप्यूटर अनुप्रयोग आयात करने की आवश्यकता (अस्थायी) के रूप में:।
import TouchRipple from 'material-ui/internal/TouchRipple';
तो फिर तुम किसी भी compomnen लपेट कर सकते हैं ToucheRipple के साथ विकल्प है, जैसे की टी: ->https://react-materialize.github.io/#/
उस मामले में, यह एक जोड़ने के रूप में सरल है
<TouchRipple>
<div>
MY RIPPLING DIV
</div>
</TouchRipple>
या, यदि आप एक CSS वर्ग आधारित apporach की जरूरत है, आप अमल में लाना lib उपयोग कर सकते हैं एक सामग्री-ui Button पर waves प्रोप के लिए मूल्य, जैसे:
<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>
आधिकारिक एपीआई इसका समर्थन नहीं करता है। लेकिन यह मैं क्या कर, जब मैं material-ui लहर का उपयोग करना चाहते है प्रभावित करते हैं:
उपयोग material-ui/internal/TouchRipple, अपने source code
प्रयोग उदाहरण पर एक नजर है:
<YourComponent>
<TouchRipple style={style}/>
{children}
</YourComponent>
आप इनलाइन पास करनी होगी अपनी ऊंचाई, चौड़ाई और स्थिति को निर्दिष्ट करने के लिए शैली YourComponent की ऊंचाई, चौड़ाई और पोस्ट
मैं पिछले 2 घंटों के लिए यह काम करने की कोशिश कर रहा हूं, लेकिन काम नहीं करता है, जाहिर है कि ऑन टचटैप प्रचार अंडरलेइंग टच रिपल घटक तक नहीं पहुंचता है, मैंने मैन्युअल रूप से ईवेंट को पास करने का प्रयास किया है, लेकिन ऐसा लगता है कि यह काम नहीं कर रहा है या तो ... कोई सुझाव? – ospfranco
बस fyi, मैंने सोर्स कोड पढ़ा है और इस तरह मुझे पता था कि मुझे मैन्युअल रूप से ऑन टचटैप को ओनमाउसडाउन को संभालने के लिए पास करना पड़ा था, लेकिन यह अभी भी काम नहीं करता है – ospfranco
@das_franco 'TouchRipple' में 'ऑन टचटैप' या 'हैंडलऑनहाउसडाउन' नहीं है '। [यहां देखें] (https://github.com/callemall/material-ui/blob/5d5128d251816bfccec0cb305a48ec553c399c4e/src/internal/TouchRipple.js#L11-L18) – xiaofan2406
@ xiaofan2406 में किए गए दृष्टिकोण ने कभी मेरे लिए काम नहीं किया, टी नहीं o उत्तीर्ण ऊंचाई, चौड़ाई और स्थिति का उल्लेख आसानी से टूटने लगता है और flexbox का उपयोग करते समय संभव नहीं हो सकता है।
हालांकि मैं यह काम की तरह बनाने में कामयाब रहे:
<YourComponent>
<TouchRipple>
{children}
</TouchRipple>
</YourComponent>
ऐसा लगता है कि यह काम नहीं करता है, मैंने 'TouchRipple जोड़ा है 'और इसे मेरे घटक के चारों ओर उपयोग करें, लेकिन लहर पृष्ठ के ऊपरी बाएं कोने पर बनाता है, जो कि उल्लिखित व्यवहार नहीं है। –
क्या आइटम पूरी तरह से स्थित हैं?खाते में नंगे सामग्री-ui रनटाइम पर कई संपत्तियों की गणना करता है, इसलिए आपको वास्तविक बच्चों के प्रतिनिधित्व पर एक नज़र रखना चाहिए, किसी भी मामले में, यह मेरे लिए काम करता है और सामग्री-यूई घटकों के स्रोत कोड को देखता है इसका उपयोग कैसे किया जा रहा है – ospfranco
मुझे बिल्कुल तैनात वस्तुओं के बारे में निश्चित नहीं है, हालांकि, मैं इस तरह की लहर का उपयोग कर रहा हूं: '
, आप उचित रूप में करने के लिए किसी भी तत्व "लहर" प्रभाव जोड़ पा रहे हैं (http://materializecss.com/ waves.html #!)। मैंने इसका परीक्षण नहीं किया है, लेकिन आपकी गली को देखता हूं। – lux