web-dev-qa-db-ja.com

マテリアルUIでカードのクリックに波及効果を追加する方法

クリック時にマテリアルUIカードコンポーネントに波及効果を追加する方法はありますか？.

http://www.material-ui.com/#/components/card

また、背景として表示するのではなく、カードコンポーネントのコンテンツの上に波及効果を与えることは可能ですか？.

javascriptreactjsmaterial-designmaterial-ui
13
Vishal Vijay

この質問には回答がなかったことがわかるので、最新の解決策を提供します（これをmaterial-uiと書くとv。0.18.7（安定）：

リップル高階コンプをインポートする必要があります。 （HOC）として：

import TouchRipple from '@material-ui/core/ButtonBase/TouchRipple';

次に、次のように、選択したコンポーネントをTouchRippleでラップできます。

<TouchRipple>
   <div>
     MY RIPPLING DIV
   </div>
</TouchRipple>

または、CSSクラスベースのアプローチが必要な場合は、materialize lib-> https://react-materialize.github.io/#/ を使用できます。

その場合、次のように、マテリアルUI wavesのButtonpropに値を追加するのと同じくらい簡単です。

<Button waves='light'>EDIT ME<Icon left>save</Icon></Button>

7
Denialos

TouchRippleがinternalディレクトリから移動されていることに気づきました。 ButtonBaseフォルダー で利用できるようになりました。

ButtonBaseコンポーネントを使用して波及効果を追加する方法は次のとおりです-

基本的に、コンポーネントをラップします。たとえば、<Card>を<ButtonBase>内にそのようにラップすると、ButtonBaseがTouchRippleの設定を処理します-

<ButtonBase>
     <Card>
         ....
     </Card>
</ButtonBase>

これが Codesandbox 作業デモへのリンクです。私はこれが最善の方法ではないことを知っています。 TouchRipple/Rippleコンポーネントを直接使用することもできますが、この方法は非常に使いやすいことがわかりました。

お役に立てれば。

5
Gryk

@ xiaofan2406で採用されたアプローチは、高さ、幅、位置を渡すことは言うまでもなく、私にはうまくいきませんでした。

しかし、私はそれを次のように機能させることができました：

<YourComponent>
    <TouchRipple>
        {children}
    </TouchRipple>
</YourComponent>
1
Oscar

公式APIはそれをサポートしていないようです。しかし、これは私がmaterial-uiリップル効果を使用したいときに行うことです：

material-ui/internal/TouchRippleを使用して、その ソースコード を見てください。

使用例：

<YourComponent>
    <TouchRipple style={style}/>
    {children}
</YourComponent>

インラインスタイルを渡して、YourComponentの高さ、幅、位置に一致する高さ、幅、位置を指定する必要があります

0
xiaofan2406