Ripple
Rippleは、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple {...rippleProps} />
</Center>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Rippleの親要素のスタイルにposition: relativeとoverflow: hiddenを設定する必要があります。使い方
import { Ripple, useRipple } from "@yamada-ui/react"
import { Ripple, useRipple } from "@/components/ui"
import { Ripple, useRipple } from "@workspaces/ui"
<Ripple />
カラーを変更する
カラーを変更する場合は、colorに色を設定します。デフォルトでは、currentColorが設定されています。
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple color="warning" {...rippleProps} />
</Center>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。無効にする
無効にする場合は、disabledをtrueに設定します。
const { onClick, ...rippleProps } = useRipple({ disabled: true })
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple {...rippleProps} />
</Center>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。または、Rippleのdisabledをtrueにすることで無効にできます。
const { onClick, ...rippleProps } = useRipple()
return (
<Center
as="button"
type="button"
onClick={onClick}
h="10"
px="3"
bg="bg.contrast"
color="fg.contrast"
rounded="l2"
position="relative"
overflow="hidden"
>
<Text>Button</Text>
<Ripple disabled {...rippleProps} />
</Center>
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。