Gibt es eine Möglichkeit, den Material-ui-Card-Komponente bei Klick Welligkeitseffekt hinzuzufügen.
Und ich würde auch gerne wissen, ob es möglich ist, einen Ripple-Effekt zu erzielen, um über den Inhalt der Card-Komponente zu kommen, anstatt dass er als Hintergrund angezeigt wird.
Ich kann sehen, dass diese Frage nicht beantwortet wurde, daher werde ich eine aktuelle Lösung bereitstellen (dies wird als material-ui ist v. 0.18.7 (stabil) geschrieben:
Sie müssen die Welligkeit höherer Ordnung importieren. (HOC) als:
import TouchRipple from 'material-ui/internal/TouchRipple';
Dann können Sie jede beliebige Komponente Ihrer Wahl mit ToucheRipple wie:
Oder, wenn Sie ein CSS-Klassen-basiertes Verfahren benötigen, können Sie materialize lib - & gt; Ссылка
In diesem Fall ist es so einfach, einen Wert zu waves prop auf einem Material-ui Button hinzuzufügen, wie:
<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>
Der Ansatz in @ xiaofan2406 hat bei mir nie funktioniert, ganz zu schweigen von Passhöhe, -breite und -position scheint leicht zu brechen und ist bei Verwendung von flexbox möglicherweise nicht möglich.
Allerdings habe ich es geschafft, es wie folgt zu machen:
%Vor% Die offizielle API scheint das nicht zu unterstützen.
Aber das ist was ich tue, wenn ich material-ui ripple affect:
Verwenden Sie material-ui/internal/TouchRipple , werfen Sie einen Blick auf den Quellcode
Anwendungsbeispiel:
%Vor% Sie müssen den Inline-Stil übergeben, um seine Höhe, Breite und Position anzugeben, die mit der Höhe, Breite und Position von YourComponent übereinstimmt
Ich habe festgestellt, dass TouchRipple aus dem Verzeichnis internal entfernt wurde.
Es ist jetzt im ButtonBase-Ordner verfügbar.
So konnte ich mithilfe der ButtonBase-Komponente einen Welleneffekt hinzufügen -
Im Grunde genommen wickeln Sie Ihre Komponente ein, sagen wir <Card> in der <ButtonBase> , und die ButtonBase kümmert sich um die TouchRipple Einstellung für Sie -
Hier ist ein Codesandbox Link zur funktionierenden Demo.
Ich weiß, das ist nicht der beste Weg. Sie könnten direkt die TouchRipple / Ripple -Komponente verwenden, aber ich fand diesen Weg sehr einfach zu bedienen.
Hoffe, das hilft.
Tags und Links javascript reactjs material-design material-ui