Skeleton
Skeletonは、コンテンツが読み込まれるまでのプレースホルダーとして機能するコンポーネントです。
<VStack>
<Skeleton />
<SkeletonCircle />
<SkeletonText />
</VStack>
使い方
import { Skeleton, SkeletonCircle, SkeletonText } from "@yamada-ui/react"
import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui"
import { Skeleton, SkeletonCircle, SkeletonText } from "@workspaces/ui"
<Skeleton />
<SkeletonCircle />
<SkeletonText />
バリアントを変更する
<VStack>
<HStack>
<For each={["pulse", "shine"]}>
{(variant) => (
<VStack key={variant}>
<SkeletonCircle variant={variant} />
<SkeletonText variant={variant} lineClamp={2} />
<Skeleton variant={variant} h="4xs" />
</VStack>
)}
</For>
</HStack>
</VStack>
サイズを変更する
<VStack>
<HStack>
<SkeletonCircle boxSize="14" />
<SkeletonText h="6" lineClamp={2} />
</HStack>
<Skeleton h="20" />
</VStack>
また、子要素を設定することで、幅と高さを合わせることができます。
Badge
Badge
プ
プ
<VStack lineHeight="1">
<HStack>
<Skeleton>
<Badge>Badge</Badge>
</Skeleton>
<Skeleton loading={false}>
<Badge>Badge</Badge>
</Skeleton>
</HStack>
<HStack>
<SkeletonCircle>
<Avatar
name="プリン"
src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
/>
</SkeletonCircle>
<SkeletonCircle loading={false}>
<Avatar
name="プリン"
src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
/>
</SkeletonCircle>
</HStack>
</VStack>
カラーを変更する
カラーを変更する場合は、startColorとendColorに値を設定します。
<VStack>
<Skeleton variant="shine" startColor="pink.500" endColor="orange.500" />
<SkeletonCircle variant="shine" startColor="pink.500" endColor="orange.500" />
<SkeletonText variant="shine" startColor="pink.500" endColor="orange.500" />
</VStack>
テキストの間隔を変更する
テキスト行間の間隔を変更する場合は、gapに値を設定します。
<SkeletonText gap="md" />
行数を指定する
行数を指定する場合は、lineClampに数値を設定します。
<SkeletonText lineClamp={5} />
所要時間を変更する
所要時間を変更する場合は、durationに数値(秒)を設定します。
<VStack>
<Skeleton duration={1} />
<SkeletonCircle duration={2} />
<SkeletonText duration={2} />
</VStack>
子要素を表示する
子要素を表示する場合は、loadingにfalseを渡します。
プ
const { loading } = useAsync(() => wait(3000))
return (
<VStack>
<HStack>
<SkeletonCircle loading={loading}>
<Avatar
name="プリン"
src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
size="xl"
/>
</SkeletonCircle>
<SkeletonText
lineClamp={2}
loading={loading}
_loading={{ h: "5" }}
lineHeight="moderate"
>
<Text fontWeight="bold" lineClamp={1}>
プリン
</Text>
<Text lineClamp={1}>
つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
歌う。
</Text>
</SkeletonText>
</HStack>
</VStack>
)
フェードインの所要時間を変更する
フェードインの所要時間を変更する場合は、fadeDurationに数値(秒)を設定します。
プ
const { loading } = useAsync(() => wait(3000))
return (
<VStack>
<HStack>
<SkeletonCircle fadeDuration={2} loading={loading}>
<Avatar
name="プリン"
src="https://zukan.pokemon.co.jp/zukan-api/up/images/index/c8e0b40c9ec85d0218754642a64cc047.png"
size="xl"
/>
</SkeletonCircle>
<SkeletonText
fadeDuration={2}
lineClamp={2}
loading={loading}
_loading={{ h: "5" }}
lineHeight="moderate"
>
<Text fontWeight="bold" lineClamp={1}>
プリン
</Text>
<Text lineClamp={1}>
つぶらな 瞳が 揺れるとき 眠たくなるような 不思議で 気持ちの良い 歌を
歌う。
</Text>
</SkeletonText>
</HStack>
</VStack>
)