11

各項目をクリックしてビューを切り替える項目のリスト (それぞれに複数の要素が含まれています) があります。全体に波及効果を出す方法はあり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}}">
                 ...
4

6 に答える 6

31

特定の要素に波及効果を使用したい場合は、 を使用できますmd-ink-ripple。

<div md-ink-ripple></div>
于 2015-03-03T10:55:32.003 に答える
11

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を500に設定することもできます (これがデフォルトのクリック可能項目の外観です)。

于 2015-06-24T19:12:45.170 に答える
2

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

解決策を探していて、あなたの質問がここにあるのを見つけたので、ソース コードを確認しに行きました。

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にmd-switch受け入れられる唯一の子です。preLinkmd-list-item

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

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

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

于 2015-05-20T05:02:32.327 に答える
0

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>
于 2015-03-07T04:58:58.660 に答える