Airy

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

<Airy
  aria-label="Toggle navigation"
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

使い方

import { Airy } from "@yamada-ui/react"

import { Airy } from "@/components/ui"

import { Airy } from "@workspaces/ui"

<Airy />

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

<Airy
  aria-label="Toggle navigation"
  duration={0.6}
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

遅延させる

遅延させる場合は、delayに数値(秒)を設定します。

<Airy
  aria-label="Toggle navigation"
  delay={1}
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

無効にする

無効にする場合は、disabledをtrueにします。

<Airy
  aria-label="Toggle navigation"
  disabled
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

<Airy
  aria-label="Toggle navigation"
  readOnly
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

制御する

const [value, onChange] = useState<KeyframeIdent>("to")

return (
  <Airy
    aria-label="Toggle navigation"
    from={<MenuIcon fontSize="2xl" />}
    to={<XIcon fontSize="2xl" />}
    value={value}
    onChange={onChange}
  />
)

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

Props

Prop	デフォルト	型 / 説明
`as`	-	`keyof IntrinsicElements` 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.
`defaultValue`	`"from"`	`KeyframeIdent` You can set the initial state.
`delay`	`0`	`number` 　The animation delay.
`disabled`	`false`	`boolean` If `true`, the component is disabled.
`duration`	`0.2`	`number` The animation duration.
`from`	-	`ReactNode` Passing React elements to "from" is required.
`onChange`	-	`(value: KeyframeIdent) => void` This is a callback function that is called when the animation state changes.
`readOnly`	`false`	`boolean` If `true`, the component is readonly.
`to`	-	`ReactNode` Passing React elements to "to" is required.
`value`	-	`KeyframeIdent` Use this when you want to control the animation from outside the component.

アクセシビリティ

Airyは、アクセシビリティに関してWAI-ARIA - Button Patternに従います。

aria-labelを設定すると、スクリーンリーダーによって読み上げられます。

<Airy
  aria-label="Menu"
  from={<MenuIcon fontSize="2xl" />}
  to={<XIcon fontSize="2xl" />}
/>

キー	説明	状態
`Enter`, `Space`	フォーカスしているボタンをアクティブにします。	-

類似のコンポーネント

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

Rippleは、要素に波及効果を付与し、ユーザーがクリックしたかどうかを認識させるコンポーネントです。

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

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

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

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

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

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

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

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