Loading
Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。
インポート
import { Loading } from "@yamada-ui/react"
使い方
編集可能な例
<Loading />
バリアントを変更する
編集可能な例
<Wrap gap="md"> <For each={[ { variant: "oval", color: "red" }, { variant: "grid", color: "orange" }, { variant: "audio", color: "yellow" }, { variant: "dots", color: "green" }, { variant: "puff", color: "teal" }, { variant: "rings", color: "blue" }, { variant: "circles", color: "cyan" }, ]} > {({ variant, color }) => ( <Loading variant={variant} fontSize="3xl" color={`${color}.500`} /> )} </For> </Wrap>
サイズを変更する
編集可能な例
<Wrap gap="md"> <For each={[ { variant: "oval", fontSize: "lg", color: "red" }, { variant: "grid", fontSize: "xl", color: "orange" }, { variant: "audio", fontSize: "2xl", color: "yellow" }, { variant: "dots", fontSize: "3xl", color: "green" }, { variant: "puff", fontSize: "4xl", color: "teal" }, { variant: "rings", fontSize: "5xl", color: "blue" }, { variant: "circles", fontSize: "6xl", color: "cyan" }, ]} > {({ variant, fontSize, color }) => ( <Loading variant={variant} fontSize={fontSize} color={`${color}.500`} /> )} </For> </Wrap>
GitHubでこのページを編集する