Как добавить эффект пульсации при щелчке карты в материале-ui

Ответ 1

Я вижу, что на этот вопрос не было ответа, поэтому я предоставлю современное решение (записав это как material-ui v. 0.18.7 (стабильный):

Вам необходимо импортировать пульсацию высшего порядка. (HOC) как:

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

Затем вы можете обернуть любой компонент по вашему выбору с помощью TouchRipple, например:

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

Или, если вам нужно приложение на основе классов CSS, вы можете использовать материализовать lib → https://react-materialize.github.io/#/

В этом случае это так же просто, как добавить значение в waves реквизит для Material-UI Button, например:

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

Ответ 2

Я заметил, что TouchRipple был перемещен из каталога internal. Теперь он доступен в папке ButtonBase.

Вот как я смог добавить эффект ряби, используя компонент ButtonBase -

По сути, вы оборачиваете свой компонент, скажем, <Card> внутри <ButtonBase> примерно так, и ButtonBase позаботится о настройке TouchRipple для вас -

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

Вот ссылка Codesandbox на рабочую демонстрацию. Я знаю, что это не лучший способ. Вы можете напрямую использовать компонент TouchRipple/Ripple, но я обнаружил, что этот способ очень прост в использовании.

Надеюсь это поможет.

Ответ 3

Подход, сделанный в @xiaofan2406, никогда не работал у меня, не говоря уже о том, что прохождение высоты, ширины и положения кажется легко разрушаемым и может быть невозможно при использовании flexbox.

Однако мне удалось заставить его работать как:

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

Ответ 4

Официальный api, похоже, не поддерживает его. Но это то, что я делаю, когда я хочу использовать material-ui эффект пульсации:

Используйте material-ui/internal/TouchRipple, посмотрите на исходный код

Пример использования:

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

Вам необходимо передать встроенный стиль, чтобы указать его высоту, ширину и положение, которые соответствуют YourComponent высоте, ширине и положению