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) | 使触摸涟漪为指定颜色 |
例如
import { Button } from 'konsta/react';
export default function () {
return (
...
{/* Makes button with red touch ripple */}
<Button className="touch-ripple-red-500">Click me</Button>
...
)
}