Ripple
Rippleは、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。
インポート
import { Ripple, useRipple } from "@yamada-ui/react"
使い方
useRippleは、親要素に設定するonPointerDownと、Rippleコンポーネントに設定するripplesとonClearを提供します。
ripples:onPointerDownごとに生成された波及効果の配列です。onClear:Rippleコンポーネントのアニメーションが終了したときに、波及効果をクリアするために必要な関数です。
編集可能な例
const { onPointerDown, ripples, onClear } = useRipple() return ( <Box as="button" type="button" onPointerDown={onPointerDown} py="sm" px="md" bg="primary" color="white" rounded="md" position="relative" overflow="hidden" > <Text>Button</Text> <Ripple ripples={ripples} onClear={onClear} /> </Box> )
親要素のスタイルにposition: relativeとoverflow: hiddenを設定する必要があります。理由は、Rippleコンポーネントの参照先を定めるためと、波及効果のアニメーションが親要素からはみ出さないようにするためです。
カラーを変更する
カラーを変更する場合は、colorに色を設定します。デフォルトでは、currentColorが設定されています。
編集可能な例
const { onPointerDown, ripples, onClear } = useRipple() return ( <Box as="button" type="button" onPointerDown={onPointerDown} py="sm" px="md" bg="primary" color="white" rounded="md" position="relative" overflow="hidden" > <Text>Button</Text> <Ripple color="secondary.500" ripples={ripples} onClear={onClear} /> </Box> )
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
const { onPointerDown, ripples, onClear } = useRipple({ isDisabled: true }) return ( <Box as="button" type="button" onPointerDown={onPointerDown} py="sm" px="md" bg="primary" color="white" rounded="md" position="relative" overflow="hidden" > <Text>Button</Text> <Ripple ripples={ripples} onClear={onClear} /> </Box> )
または、RippleコンポーネントにisDisabledをtrueすることで同じように無効化できます。
編集可能な例
const { onPointerDown, ripples, onClear } = useRipple() return ( <Box as="button" type="button" onPointerDown={onPointerDown} py="sm" px="md" bg="primary" color="white" rounded="md" position="relative" overflow="hidden" > <Text>Button</Text> <Ripple isDisabled ripples={ripples} onClear={onClear} /> </Box> )
GitHubでこのページを編集する