Flip

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

<Flip
  aria-label="Toggle icon"
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

使い方

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

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

import { Flip } from "@workspaces/ui"

<Flip />

方向を変更する

方向を変更する場合は、orientationに"vertical"または"horizontal"を設定します。デフォルトでは、"horizontal"が設定されています。

<Flip
  aria-label="Toggle icon"
  orientation="vertical"
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

所要時間を変更する

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

<Flip
  aria-label="Toggle icon"
  duration={1.4}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

遅延させる

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

<Flip
  aria-label="Toggle icon"
  delay={1}
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

無効にする

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

<Flip
  aria-label="Toggle icon"
  disabled
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

読み取り専用にする

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

<Flip
  aria-label="Toggle icon"
  readOnly
  from={<AppleIcon fontSize="2xl" />}
  to={<CherryIcon fontSize="2xl" />}
/>

制御する

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

return (
  <Flip
    aria-label="Toggle icon"
    from={<AppleIcon fontSize="2xl" />}
    to={<CherryIcon 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.4`	`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.
`orientation`	`"horizontal"`	`Orientation` The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.
`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.

アクセシビリティ

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

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

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

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

類似のコンポーネント

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

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

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

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

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

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

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

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

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

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