応用を学ぶ
Yamada UIのテーマ・ローディング・通知・アニメーションを学ぶ。
このガイドは、Yamada UIの概念を理解するのに役立ちます。開発を開始する前に、このガイドを読んでYamada UIを理解することをオススメします。
テーマ
Yamada UIは、他のUIライブラリと同様にテーマという概念が存在します。
テーマは、カラー・スペース・文字の大きさ・その他多くのトークンが定義されている変更可能なオブジェクトです。
アプリケーションで使用するブレイクポイントやカラーモードも簡単に変更可能です。
また、他のUIライブラリではあまり実装されていないテーマの切り替えもサポートしています。
The current scheme is "base"
const { themeScheme, changeThemeScheme } = useTheme()
return (
<VStack>
<Text>The current scheme is "{themeScheme}"</Text>
<Wrap gap="md" alignItems="center">
<Badge colorScheme="primary">Primary</Badge>
<Badge colorScheme="secondary">Secondary</Badge>
<Tag colorScheme="primary">Primary</Tag>
<Tag colorScheme="secondary">Secondary</Tag>
</Wrap>
<Wrap gap="md">
<Button onClick={() => changeThemeScheme("base")}>Base Theme</Button>
<Button colorScheme="red" onClick={() => changeThemeScheme("red")}>
Red Theme
</Button>
<Button colorScheme="green" onClick={() => changeThemeScheme("green")}>
Green Theme
</Button>
<Button colorScheme="blue" onClick={() => changeThemeScheme("blue")}>
Blue Theme
</Button>
</Wrap>
</VStack>
)
"use client"をファイルの上部に追加する必要があります。レイヤースタイル
レイヤースタイルは、プロジェクト全体で視覚的なスタイルを再利用するために使用されるトークンです。
<Wrap gap="md" colorScheme="blue">
<For each={["solid", "subtle", "surface", "ghost", "outline"]}>
{(token, index) => (
<Box
as="button"
type="button"
key={index}
layerStyle={token}
px="md"
py="sm"
rounded="l2"
_hover={{ layerStyle: `${token}.hover` }}
>
{toTitleCase(token)}
</Box>
)}
</For>
</Wrap>
テキストスタイル
テキストスタイルは、プロジェクト全体でテキストのスタイルを再利用するために使用されるトークンです。
Mono
<Text textStyle="mono">Mono</Text>
ローディング
Yamada UIは、アプリケーションで必要なローディングアニメーションをサポートしています。
ローディングアニメーションを実行するには、useLoadingを使用します。useLoadingは、screen・page・backgroundのインスタンスを返します。インスタンスには、いくつかのメソッドが含まれています。
start: ローディングアニメーションを開始します。update: ローディングアニメーションを更新します。finish: ローディングアニメーションを終了します。force: ローディングアニメーションを強制的に更新します。
const { screen, page, background } = useLoading()
const onLoadingScreen = async () => {
try {
screen.start()
await wait(3000)
} finally {
screen.finish()
}
}
const onLoadingPage = async () => {
try {
page.start()
await wait(3000)
} finally {
page.finish()
}
}
const onLoadingBackground = async () => {
try {
background.start()
await wait(3000)
} finally {
background.finish()
}
}
return (
<Wrap gap="md">
<Button onClick={onLoadingScreen}>Start Screen Loading</Button>
<Button onClick={onLoadingPage}>Start Page Loading</Button>
<Button onClick={onLoadingBackground}>Start Background Loading</Button>
</Wrap>
)
"use client"をファイルの上部に追加する必要があります。useAsyncCallbackを使う
アプリケーションで非同期コールバックを実行する場合は、useAsyncCallbackを使用すると、ボタンなどの要素がローディング中かどうかを示すのに便利です。
const [loading, onClick] = useAsyncCallback(async () => {
await wait(3000)
}, [])
return (
<Button loading={loading} onClick={onClick}>
Click me
</Button>
)
"use client"をファイルの上部に追加する必要があります。screenやpageなども合わせて実行することができます。
const [loading, onClick] = useAsyncCallback(
async () => {
await wait(3000)
},
[],
{ loading: "page" },
)
return (
<Button loading={loading} onClick={onClick}>
Click me
</Button>
)
"use client"をファイルの上部に追加する必要があります。通知
Yamada UIは、アプリケーションで必要な通知をサポートしています。
通知を表示するには、useNoticeを使用します。useNoticeは、通知を表示・制御するインスタンスを返します。
const notice = useNotice()
return (
<Button
onClick={() =>
notice({
title: "シェリル・ノーム",
description: "私の歌を聴けー！",
})
}
>
Show Notice
</Button>
)
"use client"をファイルの上部に追加する必要があります。アニメーション
Yamada UIは、CSSアニメーションやアニメーションに特化したコンポーネントを提供しています。
CSSアニメーション
@keyframesを使い、アニメーションの中間状態を適用するには、_keyframesを使用します。
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
_keyframes={{
from: { translate: "0 0" },
to: { translate: "100% 0" },
}}
>
Box
</Box>
また、テーマのキーフレームを使用することで、アプリケーション全体で共通のキーフレームを適用することができます。使用する場合は、animationNameまたは_keyframesに値を設定します。
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationName="fade-in"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
>
Box
</Box>
Motion
Yamada UIは、MotionにYamada UIのStyle Propsを拡張した便利なコンポーネントを提供しています。
<Center h="sm">
<Motion
boxSize="4xs"
bg="bg.contrast"
color="fg.contrast"
animate={{
scale: [1, 2, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: ["0%", "0%", "50%", "50%", "0%"],
}}
transition={{
duration: 2,
ease: "easeInOut",
times: [0, 0.2, 0.5, 0.8, 1],
repeat: Infinity,
repeatDelay: 1,
}}
/>
</Center>
Motionは、ジェスチャーアニメーションをサポートしています。
whileHover: ポインターがコンポーネント上を移動したときに実行されるアニメーション。whileTap: ポインターがコンポーネントをクリックまたはタップしたときに実行されるアニメーション。whileFocus: コンポーネントがフォーカスされたときに実行されるアニメーション。
<Motion
cursor="pointer"
w="fit-content"
p="md"
bg="bg.contrast"
color="fg.contrast"
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
whileFocus={{ scale: 1.1 }}
>
Click me!
</Motion>
Motionをもっと知りたい場合は、こちらをご覧ください。Congratulations!
おめでとうございます🎉
これで、あなたは素敵の山田になることができました🥳
もっと学習する
Yamada UIをもっと知るために、テーマやコンポーネントを学んでみませんか？😎