材質漣漪效果可以透過 v-ripple Quasar 指令輕鬆地新增到任何 DOM 元素 (或元件)。

// quasar.config file

return {
  framework: {
    config: {
      ripple: /* look at QuasarConfOptions from the API card */
    }
  }
}

用法

基本

著色

材質漣漪效果預設會採用文字的 CSS 顏色，但您可以設定它

定位

您也可以設定漣漪效果是否應始終從中心開始，無論觸控點為何

提早觸發

預設情況下，漣漪指令會在點擊或按鍵放開時觸發。但是，您可以變更此設定，使其在第一次使用者互動時 (mousedown、touchstart、keydown) 更早觸發。請注意，在大多數情況下，事件集合可能會重疊 (第一次和最後一次使用者互動之間有很小的延遲)，並且使用者感知沒有差異，但在某些情況下，可能會誤導使用者。

這在觸控螢幕上尤其明顯，如果使用者在 touchstart 後意外移動手指，有時可能會被解釋為非常小的捲動事件而不是點擊，因此不會觸發點擊事件，但仍然會有漣漪效果。

停用

如果由於某些原因，您有需要停用漣漪效果的情況，則可以將布林值指派為指令的值