Ondulazione disegno materiale angolare su md-list> md-item

Question

Ho un elenco di elementi (ognuno dei quali include più elementi) in cui ogni elemento è selezionabile e cambia visualizzazione. C'è un modo per ottenere l'effetto a catena sull'intero md-item-content? Ho provato class="ripple" ma quello non era sufficiente.

<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

Se si desidera utilizzare effetto a catena su elementi specifici che è possibile utilizzare md-ink-ripple.

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

Answer 2

Io suggerirei di usare md-button se si vuole increspature al posto del anchor. Quindi basta cambiare lo stato del tuo ui-router nel controller.

Vedere https://github.com/angular/material-start/blob/master/app/index.html#L30 per un esempio.

 <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

In realtà, su questo non c'è documentazione.

Ero alla ricerca di una soluzione e ho trovato la tua domanda qui, quindi sono andato a controllare il loro codice sorgente.

È possibile utilizzare md-list > md-list-item con diverse restrizioni. Nel tuo caso, l'idea è di avvicinarsi al loro menu dei documenti, su sidenav (la loro è una direttiva chiamata menu-link, sul link stesso), e ho apportato alcune modifiche nel mio codice originale (che erano vicine alla tua) :

  <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> 

in sostanza, non è tutti gli elementi che sono accettati come action-trigger all'interno md-list-item. md-checkbox e md-switch sono gli unici child accettati per eseguire un processo, all'interno della funzione preLink sulla direttiva md-list-item.

L'altro modo è di inserire uno ng-click nello stesso md-list-item o in un elemento figlio all'interno di esso.

Il processo preLink è un wrapper, che utilizza un pulsante "non in stile" che esegue un "proxy" sul clic e rende visivamente l'effetto di ripple.

Anche altri attributi, come gli attributi, non vengono trasferiti a questo "proxy", quindi un disabled non può essere utilizzato direttamente, è necessario simularne i risultati. Nel mio caso, interrompo l'azione di ng-clic e inserisco una classe nell'elemento.

Answer 4

Basta aggiungere una direttiva md-ink-ripple e .MD cliccabile class all'elemento <md-list-item>:

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

Inoltre è possibile impostare la font-weight a se desideri (ecco come appare un elemento di default ).

Answer 5

Le altre risposte coprono la maggior parte dei casi, ma si può anche personalizzare il colore del effetto a catena utilizzando

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

Questo darà una luce di colore blu ripple.

Il team dietro Angular Material voleva mantenere questo interno e ridurre la personalizzazione, motivo per cui non lo hanno documentato bene. Tuttavia, ho pensato che fosse una personalizzazione utile. Spero che sia d'aiuto! Saluti!

Answer 6

Qui è il modo migliore per farlo:

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

1. aggiungere al vostro div md-ink-ripple direttiva
2. Aggiungi classe ondulazione al 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%;} 
} 

`