Framework7 - Touch Ripple

Sự miêu tả

Touch Ripple là một hiệu ứng chỉ được hỗ trợ trong chủ đề material của Framework7. Theo mặc định, nó được bật trong chủ đề material và bạn có thể tắt nó bằng cách sử dụng tham số materialRipple: false .

Các yếu tố Ripple

Bạn có thể bật các phần tử gợn sóng để khớp với một số bộ chọn CSS chẳng hạn như -

• ripple
• a.link
• a.item-link
• .button
• .tab-link
• .label-radio
• .label-checkbox, v.v.

Chúng được chỉ định trong tham số materialRippleElements . Bạn cần bật gợn sóng cảm ứng , thêm bộ chọn của phần tử vào tham số materialRippleElements để sử dụng hiệu ứng gợn sóng hoặc chỉ sử dụng lớp gợn sóng .

Màu sóng gợn

Màu của gợn sóng có thể được thay đổi trên phần tử bằng cách thêm lớp ripple- [color] vào phần tử.

Ví dụ -

<a href = "#" class = "button ripple-orange">Ripple Button</a>

hoặc bạn có thể xác định màu sóng gợn bằng cách sử dụng CSS như hình dưới đây -

.button .ripple-wave {
   background-color: #FFFF00;
}

Tắt các phần tử Ripple

Bạn có thể vô hiệu hóa gợn sóng cho một số phần tử được chỉ định bằng cách thêm lớp không gợn vào các phần tử đó. Ví dụ -

<a href = "#" class = "button no-ripple">Ripple Button</a>