md-list上的角度材質設計漣漪> md-item

我有一個項目列表（每個項目都包含多個元素），其中每個項目都是可點擊的並切換視圖。有沒有辦法在整個md-item-content上獲得連鎖反應？我試過class="ripple"但這還不夠。md-list上的角度材質設計漣漪> md-item

<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}}"> 
       ...

來源

2015-02-09 Simon H

「漣漪」在或？在http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design中，它似乎在整個列表中而不是內容上。 – paje007 2015-02-09 14:03:09

＃WeirdHackThatWorks'' – poxip 2015-06-24 19:03:46

如果要對特定元素使用漣漪效應，可以使用md-ink-ripple。

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

來源

2015-03-03 10:55:32 sarunast

如何在md卡懸停上添加md-ink-ripple效果？ – 2016-07-05 10:36:57

我會建議使用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-07 04:58:58 Splaktar

實際上，這方面的文檔很少。

我正在尋找一個解決方案，並在這裏找到你的問題，所以我去檢查他們的源代碼。

您可以使用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是唯一被接受進行處理的孩子，preLink功能md-list-item指令。

另一種方法是將ng-click放在md-list-item本身或其中的子元素中。

preLink過程是一個包裝，使用「非風格」按鈕在點擊上做一個「代理」，並在視覺上實現了連鎖效果。

其他東西，如屬性，也不會被轉移到這個「代理」，所以disabled不能直接使用，您需要模擬其結果。就我而言，我打斷了ng-click動作，並將一個類放入元素中。

來源

2015-05-20 05:02:32

只需添加一個MD-墨紋波指令和.MD-點擊類的<md-list-item>元素：

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

您也可以在字體重量設置爲如果你希望（這是一個默認的可點擊項目的樣子）。

來源

2015-06-24 19:12:45 poxip

其他的答案涵蓋了大部分的情況下，但你也可以通過使用

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

這會給一個淡藍色的波紋顏色定製的連鎖反應顏色。

Angular Material背後的團隊想要保持這種內在性並減少定製，這就是爲什麼他們沒有很好地記錄下來。不過，我認爲這是一個有用的定製。希望能幫助到你！乾杯!

來源

2015-07-12 10:16:14 mutp

下面是做到這一點的最好辦法：

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

添加到您的DIV MD-墨紋波指令
添加紋波類的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%;} 
}

來源

2017-05-25 13:39:09

md-list上的角度材質設計漣漪> md-item

回答

相關問題