🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具! 🔥

觸摸漣漪

Konsta UI 的 Material 主題實作了 Material Design 觸摸漣漪效果。

對於 Material 主題,預設會啟用此效果。

透過這些額外的實用程式類別,我們可以控制觸摸漣漪「波紋」的顏色

類別CSS
.touch-ripple-current--k-touch-ripple-color: rgba(0, 0, 0, 0.1)從父元素的文字顏色繼承觸摸漣漪顏色
.touch-ripple-black--k-touch-ripple-color: rgba(255, 255, 255, 0.15)使觸摸漣漪為黑色
.touch-ripple-white--k-touch-ripple-color: currentColor使觸摸漣漪為白色
.touch-ripple-[color]--k-touch-ripple-color: rgba([color], 0.25)使觸摸漣漪為指定的顏色

例如

<template>
  <!-- Makes button with red touch ripple -->
  <k-button class="touch-ripple-red-500">Click me</k-button>
</template>
<script>
  import { kButton } from 'konsta/vue';

  export default {
    components: {
      kButton,
    },
  };
</script>
程式碼授權條款 MIT.
2022 © Konsta UI 作者 nolimits4web.