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>