C'è un modo per aggiungere l'effetto di ripple al componente della scheda ui del materiale al clic.Come aggiungere l'effetto di ripple sul clic della scheda nel materiale-ui
http://www.material-ui.com/#/components/card
E vorrei anche sapere, è possibile fare effetto a catena di venire in cima al contenuto del componente di carta, piuttosto che mostrare come sfondo.
posso vedere questa domanda non ha avuto risposta, così ho vi fornirò una soluzione up-to-date (scrivendo questo come material-ui è v 0,18. 0,7 (stabile):
È necessario importare il ripple di ordine superiore comp (HOC) come:.
import TouchRipple from 'material-ui/internal/TouchRipple';
Quindi è possibile avvolgere qualsiasi compomnen t di voi scelta con ToucheRipple, come:
<TouchRipple>
<div>
MY RIPPLING DIV
</div>
</TouchRipple>
Oppure, se avete bisogno di un suddetto approccio a base di classe CSS, è possibile utilizzare Materialise lib ->https://react-materialize.github.io/#/
In questo caso, si tratta di semplice come l'aggiunta di un valore al waves prop su un materiale-ui Button, come:
<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>
L'API ufficiale non sembra supportarla. Ma questo è quello che faccio, quando voglio usare material-ui ripple interessare:
Usa material-ui/internal/TouchRipple, dare un'occhiata al suo esempio source code
Usage:
<YourComponent>
<TouchRipple style={style}/>
{children}
</YourComponent>
È necessario passare la linea stile per specificare altezza, larghezza e posizione corrispondenti all'altezza, alla larghezza e alla posizione di YourComponent
Ho provato a farlo funzionare per le ultime 2 ore o giù di lì, ma non funziona, apparentemente la propagazione di onTouchTap non raggiunge il componente TouchRipple sottostante, ho provato a passare manualmente l'evento, ma non sembra funzionare o ... qualche suggerimento? – ospfranco
Solo fyi, ho letto il codice sorgente ed è così che sapevo di dover passare manualmente onTouchTap anche per gestireOnMouseDown, ma non funziona ancora – ospfranco
@das_franco 'TouchRipple' non ha alcun' onTouchTap' o 'handleOnMouseDown '. [Vedi qui] (https://github.com/callemall/material-ui/blob/5d5128d251816bfccec0cb305a48ec553c399c4e/src/internal/TouchRipple.js#L11-L18) – xiaofan2406
L'approccio adottato in @ xiaofan2406 non ha mai funzionato per me, non t o menzionare il passaggio dell'altezza, della larghezza e della posizione sembra facilmente infrangibile e potrebbe non essere possibile quando si utilizza il flexbox.
Tuttavia sono riuscito a farlo funzionare come:
<YourComponent>
<TouchRipple>
{children}
</TouchRipple>
</YourComponent>
Sembra che non funzioni, ho aggiunto 'TouchRipple 'e lo uso attorno al mio componente, ma ripple crea nell'angolo in alto a sinistra della pagina, che ovviamente non è il comportamento menzionato. –
Gli oggetti all'interno sono posizionati in modo assoluto?nuda in conto materiale-ui calcola molte proprietà in runtime, quindi dovresti dare un'occhiata alla rappresentazione dei bambini, in ogni caso, ha funzionato per me e dare un'occhiata al codice sorgente dei componenti del materiale-ui questo è come viene utilizzato – ospfranco
Non sono sicuro di elementi posizionati in modo assoluto, tuttavia, sto usando il ripple in questo modo: '
Con Materialise-css, siete in grado di aggiungere l'effetto "onda" per ogni elemento apparentemente (http://materializecss.com/ waves.html #!). Non ho provato questo, ma guarda il tuo vicolo. – lux