如何在 MUI 中单击卡片时添加波纹效果

Posted 2023-02-22

【中文标题】如何在 MUI 中单击卡片时添加波纹效果

【英文标题】：How to add ripple effect when clicking Card in MUI

【发布时间】：2016-06-05 12:32:26

【问题描述】：

有没有办法可以在单击时为 MUI Card 组件添加波纹效果。

我也想知道，是否可以在 Card 组件的内容之上制作涟漪效果，而不是显示为背景。

【问题讨论】：

使用 materialize-css，您可以将“波浪”效果添加到看似任何元素 (materializecss.com/waves.html#!)。我还没有测试过，但是看看你的胡同。

【参考方案1】：

官方api好像不支持。 但这就是我要做的，当我想使用material-ui涟漪影响时：

使用material-ui/internal/TouchRipple，看看它的source code

使用示例：

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

你需要传递内联样式来指定它的高度、宽度和位置匹配YourComponent的高度、宽度和位置

【讨论】：

我在过去 2 个小时左右一直在尝试使这项工作，但没有成功，显然 onTouchTap 传播没有到达底层的 TouchRipple 组件，我试图手动传递事件，但这似乎也不起作用……有什么建议吗？

仅供参考，我已经阅读了源代码，这就是我知道我必须手动传递 onTouchTap 才能处理 OnMouseDown，但它仍然不起作用

@das_franco TouchRipple 没有任何onTouchTap 或handleOnMouseDown。 See here

【参考方案2】：

@xiaofan2406 中采用的方法对我来说从来没有用过，更不用说传递高度、宽度和位置似乎很容易被破坏，并且在使用 flexbox 时可能无法实现。

但是我设法让它像这样工作：

<YourComponent>
    <TouchRipple>
        children
    </TouchRipple>
</YourComponent>

【讨论】：

似乎它不起作用，我添加了TouchRipple 并在我的组件周围使用它，但是在页面的左上角创建了波纹，这显然不是提到的行为。

里面的物品是绝对定位的吗？考虑到material-ui在运行时计算了很多属性，所以你应该看看实际的孩子表示，无论如何，它对我有用，看看material-ui组件的源代码这是它是如何使用的

我不确定绝对定位的项目，但是，我正在使用这样的涟漪：<TouchRipple><Card>...</Card></TouchRipple>，但它不起作用。

我不知道 组件的内部工作原理，这在包装非实体 ui 组件时有效，我的建议是：看看 的源代码，children prop 是可能没有按照您期望的方式计算我的第二个建议：...

【参考方案3】：

我可以看到这个问题没有得到回答，所以我将提供一个最新的解决方案（写成 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/#/

在这种情况下，只需将值添加到 material-ui Button 上的 waves 属性即可，例如：

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

【讨论】：

找不到模块：无法解析“material-ui/internal/TouchRipple”

谢谢！只有一件事：现在 Ripple 位于 '@material-ui/core/ButtonBase/TouchRipple';

【参考方案4】：

我注意到 TouchRipple 已从 internal 目录中移出。 现在可以通过ButtonBase folder 获得。

这是我如何使用 ButtonBase 组件添加波纹效果 -

基本上，你包装你的组件，比如<Card> 在<ButtonBase> 中，ButtonBase 负责为你设置TouchRipple -

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

这是一个 Codesandbox 链接到工作演示。 我知道这不是最好的方法。你可以直接使用TouchRipple/Ripple组件，但是我发现这种方式非常好用。

希望这会有所帮助。

【参考方案5】：

这是 2021 年更新的解决方案

simple 您需要使用材料 ui 中的组件包装您的自定义组件。 然后添加 style padding: 0 即可解决。 在这里，我希望我的图像应该产生涟漪效应。

您可以通过使用 Grid 和 props 容器进行包装来自定义

import  Button  from "@material-ui/core";

function ImageCard(props)

return (
            <Button style= padding: 0, borderRadius: "16px" >
              /*my custom component you can use any component even material ui component also*/
                <img
                  src=yourImageUrl
                  
                  style=
                    height: 200,
                    width: 400,
                    borderRadius: "16px",//optional
                  
                />
              </Button>
      );

【参考方案6】：

2021 年更新

单击Card 时添加涟漪效果的最惯用方法是使用CardActionArea。 This component 继承了 ButtonBase 的 props。它还会在悬停和聚焦时更改 Card 背景颜色（与 ButtonBase 不同）：

<Card>
  <CardActionArea>
    <CardContent>
      ...
    </CardContent>
  </CardActionArea>
</Card>