【问题标题】:How to add ripple effect when clicking Card in MUI如何在 MUI 中单击卡片时添加波纹效果
【发布时间】:2016-06-05 12:32:26
【问题描述】:

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

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

【问题讨论】:

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

标签: javascript reactjs material-design material-ui


【解决方案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 没有任何onTouchTaphandleOnMouseDownSee here
【解决方案2】:

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

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

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

【讨论】:

  • 似乎它不起作用,我添加了TouchRipple 并在我的组件周围使用它,但是在页面的左上角创建了波纹,这显然不是提到的行为。
  • 里面的物品是绝对定位的吗?考虑到material-ui在运行时计算了很多属性,所以你应该看看实际的孩子表示,无论如何,它对我有用,看看material-ui组件的源代码这是它是如何使用的
  • 我不确定绝对定位的项目,但是,我正在使用这样的涟漪:&lt;TouchRipple&gt;&lt;Card&gt;...&lt;/Card&gt;&lt;/TouchRipple&gt;,但它不起作用。
  • 我不知道 组件的内部工作原理,这在包装非实体 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 属性即可,例如:

&lt;Button waves='light'&gt;EDIT ME&lt;Icon left&gt;save&lt;/Icon&gt;&lt;/Button&gt;

【讨论】:

  • 找不到模块:无法解析“material-ui/internal/TouchRipple”
  • 谢谢!只有一件事:现在 Ripple 位于 '@material-ui/core/ButtonBase/TouchRipple';
【解决方案4】:

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

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

基本上,你包装你的组件,比如&lt;Card&gt;&lt;ButtonBase&gt; 中,ButtonBase 负责为你设置TouchRipple -

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

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

希望这会有所帮助。

【讨论】:

    【解决方案5】:

    这是 2021 年更新的解决方案

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

    您可以通过使用 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}
                      alt="img"
                      style={{
                        height: 200,
                        width: 400,
                        borderRadius: "16px",//optional
                      }}
                    />
                  </Button>
          );
    }
    

    【讨论】:

      【解决方案6】:

      2021 年更新

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

      <Card>
        <CardActionArea>
          <CardContent>
            {...}
          </CardContent>
        </CardActionArea>
      </Card>
      

      【讨论】:

        猜你喜欢
        • 2016-06-26
        • 2015-06-26
        • 2015-09-04
        • 2022-10-08
        • 2015-02-18
        • 1970-01-01
        • 2019-05-14
        • 2017-07-20
        • 1970-01-01
        相关资源
        最近更新 更多