Czy istnieje sposób na dodanie efektu marszczenia do elementu karty Material-ui po kliknięciu.Jak dodać efekt falowania do kliknięcia karty w materiał-ui
http://www.material-ui.com/#/components/card
I Chciałbym również wiedzieć, czy jest możliwe, aby odzew przyjść na szczycie zawartości składnika karcie, a to, że pokazano jako tło.
widzę to pytanie nie odpowiedział, więc będę zapewnienie up-to-date rozwiązanie (pisanie to jako material-ui jest v 0.18. 0,7 (stable):
trzeba importować tętnienia wyższego rzędu comp (HOC) jako:.
import TouchRipple from 'material-ui/internal/TouchRipple';
Następnie można owinąć każdą compomnen t you wyboru z ToucheRipple, jak:
<TouchRipple>
<div>
MY RIPPLING DIV
</div>
</TouchRipple>
Lub, jeśli trzeba apporach CSS klasa opartego można użyć Materialise lib ->https://react-materialize.github.io/#/
W tym przypadku jest to tak proste jak dodanie wartość waves rekwizyt na materiale-ui Button, jak:
<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>
Oficjalne api nie wydaje się go wspierać. Ale to, co robię, kiedy chcę użyć material-ui tętnienia wpływają:
Zastosowanie material-ui/internal/TouchRipple, rzucić okiem na jego przykładzie source code
Zastosowanie:
<YourComponent>
<TouchRipple style={style}/>
{children}
</YourComponent>
Trzeba zdać inline styl określający jego wysokość, szerokość i położenie odpowiadające wysokości, szerokości i pozycji
Próbowałem zrobić to przez ostatnie 2 godziny, ale nie działa, najwyraźniej propagacja onTouchTap nie dociera do składnika UnderRail TouchRipple, próbowałem ręcznie przekazać zdarzenie, ale to nie działa albo ... jakieś sugestie? – ospfranco
Po prostu fyi, przeczytałem kod źródłowy iw ten sposób wiedziałem, że muszę ręcznie przekazać onTouchTap nawet do obsługiOnMouseDown, ale nadal nie działa – ospfranco
@das_franco 'TouchRipple' nie ma żadnego' onTouchTap' lub 'handleOnMouseDown '. [Zobacz tutaj] (https://github.com/callemall/material-ui/blob/5d5128d251816bfccec0cb305a48ec553c399c4e/src/internal/TouchRipple.js#L11-L18) – xiaofan2406
Podejście podjęte w @ xiaofan2406 nigdy nie działało dla mnie, nie t o wzmianka o przechodzącej wysokości, szerokości i pozycji wydaje się być łatwa do złamania i może nie być możliwa podczas korzystania z Flexbox.
Jednak udało mi się zrobić to działa tak:
<YourComponent>
<TouchRipple>
{children}
</TouchRipple>
</YourComponent>
Wygląda na to, że to nie działa, dodałem 'TouchRipple 'i używaj go wokół mojego komponentu, ale marszczyć tworzy się w lewym górnym rogu strony, co oczywiście nie jest wspomnianym zachowaniem. –
Czy przedmioty w środku są ustawione absolutnie?Wychodząc na konto material-ui oblicza wiele właściwości w czasie wykonywania, więc powinieneś rzucić okiem na rzeczywistą reprezentację dzieci, w każdym przypadku zadziałało to dla mnie i przyjrzenie się kodowi źródłowemu komponentów material-ui jak to jest używane? – ospfranco
Nie jestem pewien co do pozycji absolutnie pozycjonowanych, jednak używam takiego ripple: '
z zmaterializować-css, jesteś w stanie dodać efekt „fali” na pozór każdy element (http://materializecss.com/ waves.html #!). Nie testowałem tego, ale patrzę na twoją uliczkę. – lux