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"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`DOMElement` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`onClear`	-	`(key: Key) => void` The callback invoked when a ripple is cleared.
`ripples`	-	`RippleOptions[]` The ripples to use.
`disabled`	`false`	`boolean` If `true`, disable ripple effects when pressing a element.

類似のコンポーネント

Rotateは、２つの要素を回転させながら切り替えるアニメーションを提供するコンポーネントです。

Flipは、２つの要素をフリップさせながら切り替えるアニメーションを提供するコンポーネントです。

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

Airyは、２つの要素をふわっと切り替えるアニメーションを提供するコンポーネントです。

SlideFadeは、要素を指定位置から移動しながら次第に表示または非表示にするコンポーネントです。

Slideは、要素をページの隅から表示または非表示にするコンポーネントです。

Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。

Fadeは、要素を次第に表示または非表示にするコンポーネントです。

使用しているコンポーネント・フック

Motionは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントです。

使用されているコンポーネント・フック

Buttonは、フォームの送信、モーダルの開閉など、ユーザーが操作できるインタラクティブなコンポーネントです。