Kątowa grafika materiałowa na liście md> pozycja-md

Question

Mam listę elementów (z których każda zawiera wiele elementów), gdzie każdy element jest klikalny i przełącza widok. Czy istnieje sposób na uzyskanie efektu marszczenia na całym md-item-content? Próbowałem class="ripple", ale to nie było wystarczające.

<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

Jeśli chcesz użyć efektu marszczenia na określone elementy, możesz użyć md-ink-ripple.

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

Answer 2

Sugerowałbym użyciu md-button jeśli chcesz wsady zamiast tego anchor. Następnie po prostu wykonaj zmianę stanu interfejsu użytkownika w kontrolerze.

Zobacz przykład na przykład 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

Właściwie brakuje w tym dokumentacji.

Szukałem rozwiązania i znalazłem twoje zapytanie tutaj, więc poszedłem sprawdzić ich kod źródłowy.

Możesz użyć md-list > md-list-item z kilkoma ograniczeniami. W twoim przypadku chodzi o to, aby zbliżyć się do ich menu dokumentów, na sidenav (jest to dyrektywa o nazwie menu-link, na samym linku), a ja doświadczyłem pewnych modyfikacji w moim oryginalnym kodzie (które były bliskie twojemu) :

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

Zasadniczo nie wszystkie elementy, które są akceptowane jako action-wyzwalaczy wewnątrz md-list-item. md-checkbox i md-switch są jedynymi dziećmi, które są akceptowane w procesie, w ramach funkcji preLink na dyrektywie md-list-item.

Innym sposobem jest umieszczenie wewnątrz siebie ng-click na samym md-list-item lub w elemencie podrzędnym.

Proces preLink to otok, za pomocą przycisku "niezaznaczony", który wykonuje "proxy" kliknięcia, i wizualnie osiąga efekt marszczenia.

Inne rzeczy, takie jak atrybuty, również nie są przesyłane do tego "proxy", więc disabled nie może być użyty bezpośrednio, musisz zasymulować jego wyniki. W moim przypadku przerywam akcję ng-click i umieszczam klasę w elemencie.

Answer 4

Wystarczy dodać MD-ink-tętnienia dyrektywę i .md NumerKopiiZapasowej klikalne klasy do elementu <md-list-item>:

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

Ponadto można ustawić font-weight do jeżeli chcesz (tak wygląda domyślny element o nazwie).

Answer 5

innych odpowiedzi pokrycie większości przypadków, ale można również dostosować kolor odzew za pomocą

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

to da się marszczyć jasnoniebieski kolor.

Zespół zajmujący się materiałem kątowym chciał zachować tę wewnętrzną i ograniczyć personalizację, dlatego nie udokumentował tego dobrze. Jednak pomyślałem, że to była przydatna personalizacja. Mam nadzieję, że to pomoże! Twoje zdrowie!

Answer 6

Tutaj jest najlepszym sposobem, aby to zrobić:

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

1. dodać do div MD-ink-tętnienia dyrektywa
2. dodać tętnienia klasę do 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%;} 
} 

`