web-dev-qa-db-ja.com

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

特定の要素にリップル効果を使用したい場合は、md-ink-ripple。

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

md-ink-rippleディレクティブと。md-clickableクラスを<md-list-item>要素に追加するだけです。

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

また、必要に応じてfont-weightを5に設定することもできます（これがデフォルトのクリック可能なアイテムのようになります）。

11
poxip

他の回答はほとんどの場合をカバーしていますが、次のコマンドを使用して波紋効果の色をカスタマイズすることもできます

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

これにより、水色のリップルカラーが得られます。

Angular資料の背後にあるチームは、これを内部的に維持し、カスタマイズを減らしたいと考えていたため、十分に文書化されていませんでした。しかし、それは有用なカスタマイズであると思いました。それが役に立てば幸いです！乾杯！

5
mutp

実際には、これに関するドキュメントが不足しています。

私は解決策を探していて、あなたの質問をここで見つけたので、私は彼らのソースコードをチェックしに行きました。

いくつかの制限付きでmd-list > md-list-itemを使用できます。あなたの場合、アイデアは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ディレクティブのpreLink関数内で、md-switchおよびmd-list-itemは、プロセスの実行が許可されている唯一の子です。

もう1つの方法は、ng-clickをmd-list-item自体に配置するか、その内部の子要素に配置することです。

preLinkプロセスはラッパーであり、クリック時に「プロキシ」を実行する「非スタイル」ボタンを使用して、視覚的にリップル効果を実現します。

属性のような他のものもこの「プロキシ」に転送されないため、disabledを直接使用することはできません。その結果をシミュレートする必要があります。私の場合、ng-clickアクションを中断して、クラスを要素に配置します。

2
Mateus Leon

これを行う最良の方法は次のとおりです。

<div md-ink-ripple class="ripple">Div like an md-button</div>
  1. div md-ink-rippleディレクティブに追加する
  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%;}
}

`

0
Svetlana Rozhkova

anchorの代わりに波紋が必要な場合は、md-buttonの使用をお勧めします。次に、コントローラーでuiルーターの状態を変更します。

例については、 https://github.com/angular/material-start/blob/master/app/index.html#L を参照してください。

       <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