Konsta UIの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) | 指定された色のタッチリップルを作成する |
たとえば
<script>
import { Button } from 'konsta/svelte';
</script>
<!-- Makes button with red touch ripple -->
<Button class="touch-ripple-red-500">Click me</Button>