Angular рябь материала в md-list> md-item

У меня есть список элементов (каждый из которых включает в себя несколько элементов), где каждый элемент является кликабельным и переключает представление. Есть ли способ получить эффект пульсации на целом md-item-content? Я попробовал class="ripple", но этого было недостаточно.

<md-content>
    <md-list layout="column" md-padding>
        <md-item ng-repeat="resto in list.data.recommendations">
            <a ui-sref="resto({qname: resto.qname})" class="ripple">
              <md-item-content id="resto{{$index}}">
                 ...

Ответ 1

Если вы хотите использовать эффект пульсации для определенных элементов, вы можете использовать md-ink-ripple.

<div md-ink-ripple></div>

Ответ 2

Просто добавьте директиву md-ink-pipple и класс .md-clickable в элемент <md-list-item>:

<md-list-item md-ink-ripple class="md-clickable">
    <p>Foo</p>
</md-list-item>

Также вы можете установить font-weight на 500, если хотите (как выглядит элемент clickable-item по умолчанию).

Ответ 3

Другие ответы охватывают большинство случаев, но вы также можете настроить цвет эффекта пульсации, используя

<md-list-item md-ink-ripple="#03A9F4">
  <p></p>
</md-list-item>

Это даст светло-голубой цвет пульсации.

Команда, стоящая за Angular Material, хотела сохранить это внутреннее и уменьшить настройку, поэтому они не задокументировали ее хорошо. Однако я думал, что это была удобная настройка. Надеюсь, поможет! Ура!

Ответ 4

Собственно, недостатка документации по этому поводу.

Я искал решение и нашел ваш запрос здесь, поэтому я пошел проверить исходный код.

Вы можете использовать md-list > md-list-item с несколькими ограничениями. В вашем случае идея состоит в том, чтобы приблизиться к своему меню docs, по sidenav (их директива называется menu-link, по самой ссылке), и я выполнил некоторые изменения в моем исходном коде (которые были близки к ваш):

            <md-list>
                <md-list-item
                    ng-repeat="section in ::admin.sections"
                    ng-class="{
                        'active': $state.includes(section.active),
                        'disabled': section.disabled
                    }"
                    ng-click="!section.disabled && $state.go(section.state)">
                    <span ng-bind="::section.label"></span>
                </md-list-item>
            </md-list>

В принципе, это не все элементы, которые принимаются как триггеры действий внутри md-list-item. md-checkbox и md-switch являются единственными дочерними элементами, которые принимаются для выполнения процесса, внутри preLink в директиве md-list-item.

Другим способом является размещение ng-click самого md-list-item или дочернего элемента внутри него.

Процесс preLink представляет собой оболочку, используя кнопку "не-стиле", которая делает "прокси" на клике и визуально усиливает эффект пульсации.

Другие вещи, такие как атрибуты, также не переносятся на этот "прокси", поэтому disabled нельзя использовать напрямую, вам нужно имитировать его результаты. В моем случае я прерываю действие ng-click и помещаю класс в элемент.

Ответ 5

Я бы предложил использовать md-button, если вы хотите рябь вместо anchor. Затем просто измените ваше состояние ui-router в контроллере.

См. https://github.com/angular/material-start/blob/master/app/index.html#L30 для примера.

       <md-list layout="column" md-padding>
        <md-item ng-repeat="resto in list.data.recommendations">
            <md-button ng-click="vm.navigateToResto(resto)" ng-class="{'selected' : it === vm.selected }" id="resto{{$index}}">
              ...
            </md-button>
        </md-item>
      </md-list>

Ответ 6

Вот лучший способ сделать это:

<div md-ink-ripple class="ripple">Div like an md-button</div>

добавить в свою директиву div md-ink-ripple
добавить класс ripple в ваш div:

.ripple {
  position: relative;
  &:active > .wave {
    animation: ripple 0.25s;
  }
  .wave{
    position:absolute;
    width:100%;
    height:100%;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 0 0;
    top:0;
    left:0;
    transform: scale(0);
    opacity:0;
  }
}
@keyframes ripple {
  0% {transform: scaleX(0);}
  50%{transform: scaleX(1);opacity:0.3;}
  100%{transform: scaleX(1);opacity:0;background-size: 1000% 1000%;}
}