web-dev-qa-db-fra.com

Angular ondulation de la conception matérielle sur md-list> md-item

J'ai une liste d'éléments (chacun comprenant plusieurs éléments) où chaque élément est cliquable et bascule. Existe-t-il un moyen d'obtenir l'effet d'entraînement sur l'ensemble md-item-content? J'ai essayé class="ripple" mais ce n'était pas suffisant.

<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}}">
                 ...
angularjsmaterial-designangular-material
11
Simon H

Si vous souhaitez utiliser l'effet d'entraînement sur des éléments spécifiques, vous pouvez utiliser md-ink-ripple.

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

Il suffit d’ajouter une directive md-ink-ripple et une instruction .md-clickable class à l’élément <md-list-item>:

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

Vous pouvez aussi définir le font-weight sur 500 si vous le souhaitez (c’est à quoi ressemble un élément par défaut clickable-item).

11
poxip

Les autres réponses couvrent la plupart des cas, mais vous pouvez également personnaliser la couleur de l'effet d'entraînement en utilisant

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

Cela donnera une couleur d'ondulation bleu clair. 

L’équipe derrière Angular Material souhaitait conserver cet aspect interne et réduire les possibilités de personnalisation, raison pour laquelle elle ne l’a pas bien documentée. Cependant, j'ai pensé que c'était une personnalisation utile. J'espère que ça aide! À votre santé!

5
mutp

En fait, il manque de documentation à ce sujet.

Je cherchais une solution et j'ai trouvé votre demande ici, alors je suis allé vérifier leur code source.

Vous pouvez utiliser md-list > md-list-item avec plusieurs restrictions. Dans votre cas, l’idée est de se rapprocher de leur menu de documentation, sur sidenav (leur directive est une directive appelée menu-link, sur le lien lui-même), et j’ai apporté quelques modifications à mon code original (qui étaient proches du vôtre) :

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

Fondamentalement, tous les éléments acceptés comme déclencheurs d'action ne figurent pas dans md-list-item. md-checkbox et md-switch sont les seuls enfants acceptés pour effectuer un processus, dans la fonction preLink de la directive md-list-item.

L'autre façon consiste à placer un ng-click sur le md-list-item lui-même, ou dans un élément enfant, à l'intérieur de celui-ci.

Le processus preLink est un wrapper, qui utilise un bouton "non stylisé" qui crée un "proxy" au clic et complète visuellement l'effet d'entraînement.

D'autres éléments, tels que les attributs, ne sont pas transférés vers ce "proxy". Par conséquent, une variable disabled ne peut pas être utilisée directement, vous devez simuler ses résultats. Dans mon cas, j'interromps l'action ng-click et place une classe dans l'élément.

2
Mateus Leon

Voici le meilleur moyen de le faire:

<div md-ink-ripple class="ripple">Div like an md-button</div>
  1. ajouter à votre directive div md-ink-ripple 
  2. ajoutez la classe d'ondulation à votre 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%;}
}

`

0
Svetlana Rozhkova

Je suggérerais d'utiliser md-button si vous voulez des ondulations au lieu de anchor. Ensuite, faites simplement le changement d'état de votre routeur ui dans le contrôleur.

Voir https://github.com/angular/material-start/blob/master/app/index.html#L30 pour un exemple.

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