Skeleton

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

インポート

import { Skeleton, SkeletonCircle, SkeletonText } from "@yamada-ui/react"

Copied!

使い方

編集可能な例

<VStack>
  <Skeleton />

  <SkeletonCircle />

  <SkeletonText />
</VStack>

Copied!

カラーを変更する

startColorとendColorで、アニメーションの始まりと終わりの色を設定できます。

編集可能な例

<VStack>
  <Skeleton startColor="pink.500" endColor="orange.500" />

  <SkeletonCircle startColor="pink.500" endColor="orange.500" />

  <SkeletonText startColor="pink.500" endColor="orange.500" />
</VStack>

Copied!

サイズを変更する

要素の幅や高さを変更するには、boxSizeやtextHeightを文字列または数値を設定します。

編集可能な例

<VStack>
  <Skeleton h={16} />

  <SkeletonCircle boxSize={16} />

  <SkeletonText textHeight={4} />
</VStack>

Copied!

また、子要素を渡すことで、幅と高さを合わせることができます。

編集可能な例

<Skeleton>
  <Text>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>
  <Text>
    私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
  </Text>
</Skeleton>

Copied!

行数を指定する

lineClampに数値を設定することで、行数を変更できます。デフォルトは、3が設定されています。

編集可能な例

<SkeletonText lineClamp={5} />

Copied!

所要時間を変更する

speedに文字列または数値(秒)を設定することで、アニメーションの所要時間を変更できます。デフォルトは、0.8が設定されています。

編集可能な例

<VStack>
  <Skeleton speed={2} />

  <SkeletonCircle speed={2} />

  <SkeletonText speed={2} />
</VStack>

Copied!

コンテンツを表示する

isLoadedをtrueにすることで、プレースホルダーはフェードアウトしコンテンツを表示します。

編集可能な例

const [isLoaded, { toggle }] = useBoolean()

return (
  <VStack>
    <Button alignSelf="flex-start" onClick={toggle}>
      Toggle
    </Button>

    <SkeletonCircle isLoaded={isLoaded}>
      <Avatar name="Hirotomo Yamada" />
    </SkeletonCircle>

    <Skeleton isLoaded={isLoaded}>
      <Heading isTruncated>ギャルのパンティーおくれーーーっ！！！！！</Heading>
    </Skeleton>

    <SkeletonText isLoaded={isLoaded} lineClamp={1} textHeight={6}>
      <Text isTruncated>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    </SkeletonText>
  </VStack>
)

Copied!

フェードアウトの所要時間を変更する

プレースホルダーのフェードアウトの所要時間を変更する場合は、fadeDurationに数値(秒)を設定します。デフォルトでは、0.4が設定されています。

編集可能な例

const [isLoaded, { toggle }] = useBoolean()

return (
  <VStack>
    <Button alignSelf="flex-start" onClick={toggle}>
      Toggle
    </Button>

    <SkeletonCircle isLoaded={isLoaded} fadeDuration={2}>
      <Avatar name="Hirotomo Yamada" />
    </SkeletonCircle>

    <Skeleton isLoaded={isLoaded} fadeDuration={4}>
      <Heading isTruncated>ギャルのパンティーおくれーーーっ！！！！！</Heading>
    </Skeleton>

    <SkeletonText
      isLoaded={isLoaded}
      fadeDuration={6}
      lineClamp={1}
      textHeight={6}
    >
      <Text isTruncated>
        私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Text>
    </SkeletonText>
  </VStack>
)

Copied!

GitHubでこのページを編集する

前Loading 次Progress