Равномерность углового материала в md-list> md-item

Question

У меня есть список элементов (каждый из которых включает в себя несколько элементов), где каждый элемент можно щелкнуть и переключить вид. Есть ли способ получить эффект пульсации на целом 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}}"> 
       ... 

Answer 1

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

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

Answer 2

Я предложил бы использовать 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> 

Answer 3

На самом деле, недостатка в документации по этому вопросу нет.

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

Вы можете использовать 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 и помещаю класс в элемент.

Answer 4

Просто добавьте мкр-чернила пульсация директиву и .md-интерактивный класса к <md-list-item> элементу:

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

Также вы можете установить шрифт веса до если вы хотите (так выглядит по умолчанию clickable-item).

Answer 5

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

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

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

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

Answer 6

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

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

1. добавить в свой ДИВ мкр-чернильный пульсация директива
2. добавить мультипликационный класс в 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%;} 
} 

`