Góc thiết kế vật liệu góc trên md-list> md-item

Question

Tôi có một danh sách các mục (mỗi mục bao gồm nhiều phần tử) trong đó mỗi mục có thể nhấp và chuyển đổi chế độ xem. Có cách nào để có được hiệu ứng gợn trên toàn bộ md-item-content? Tôi đã thử class="ripple" nhưng điều đó là không đủ.

<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

Nếu bạn muốn sử dụng hiệu ứng gợn sóng trên các phần tử cụ thể, bạn có thể sử dụng md-ink-ripple.

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

Answer 2

tôi sẽ đề nghị sử dụng md-button nếu bạn muốn gợn sóng thay vì anchor. Sau đó, chỉ cần thay đổi trạng thái ui-router của bạn trong bộ điều khiển.

Xem https://github.com/angular/material-start/blob/master/app/index.html#L30 để biết ví dụ.

 <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

Thực ra, thiếu tài liệu về điều này.

Tôi đã tìm kiếm giải pháp và tìm thấy yêu cầu của bạn ở đây, vì vậy tôi đã đi kiểm tra mã nguồn của họ.

Bạn có thể sử dụng md-list > md-list-item với một số hạn chế. Trong trường hợp của bạn, ý tưởng là để đến gần trình đơn tài liệu của họ, trên sidenav (của họ là một chỉ thị được gọi là menu-link, trên chính liên kết), và tôi đã hoàn thành với một số sửa đổi trong mã ban đầu của tôi (gần với của bạn) :

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

Về cơ bản, không phải là tất cả các yếu tố đó được chấp nhận như là hành động trigger bên md-list-item. md-checkbox và md-switch là những đứa trẻ duy nhất được chấp nhận thực hiện quy trình, bên trong preLink chức năng trên chỉ thị md-list-item.

Cách khác là đặt ng-click trên chính mình là md-list-item hoặc trong phần tử con bên trong.

Quy trình preLink là trình bao bọc, sử dụng nút "không theo kiểu" thực hiện "proxy" trên lần nhấp và trực quan làm mờ hiệu ứng gợn sóng.

Những thứ khác, như thuộc tính cũng không được chuyển sang "proxy" này, vì vậy không thể sử dụng trực tiếp disabled, bạn cần mô phỏng kết quả của nó. Trong trường hợp của tôi, tôi làm gián đoạn hành động ng-click, và đặt một lớp vào phần tử.

Answer 4

Chỉ cần thêm một md-ink-gợn chỉ thị và .md-nhấp được lớp đến <md-list-item> yếu tố:

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

Ngoài ra bạn có thể đặt font-weight để nếu bạn muốn (đó là cách mặc định có thể nhấp vào mục giống như).

Answer 5

Những câu trả lời khác bao gồm hầu hết các trường hợp, nhưng bạn cũng có thể tùy chỉnh màu sắc của hiệu ứng gợn bằng cách sử dụng

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

này sẽ cung cấp một ánh sáng màu xanh gợn.

Nhóm nghiên cứu phía sau Material Angular muốn giữ tùy chỉnh nội bộ và giảm này, đó là lý do tại sao họ không ghi lại nó tốt. Tuy nhiên, tôi nghĩ đó là một tùy biến hữu ích. Hy vọng nó giúp! Chúc mừng!

Answer 6

Dưới đây là cách tốt nhất để làm điều đó:

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

1. thêm để bạn div md-ink-gợn chỉ
2. thêm lớp gợn để div của bạn:

'

.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%;} 
} 

`