🔥 了解我们的新项目 t0ggles - 您终极的项目管理工具! 🔥

触摸涟漪

Konsta UI 的材质主题包含材质设计触摸涟漪效果的实现。

它在材质主题中默认启用。

使用这些额外的实用程序类,我们可以控制触摸涟漪“波浪”的颜色

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.