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

プ

<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>
)

Props

Skeleton

Prop	デフォルト	型 / 説明
`as`	-	`As` 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.
`variant`	`"pulse"`	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`number \| string` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation end.
`fadeDuration`	-	`number \| string` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`startColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation start.

SkeletonCircle

Prop	デフォルト	型 / 説明
`as`	-	`As` 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.
`variant`	-	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`number \| string` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation end.
`fadeDuration`	-	`number \| string` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`startColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation start.

SkeletonText

Prop	デフォルト	型 / 説明
`as`	-	`As` 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.
`variant`	-	`"none" \| "pulse" \| "shine"` The variant of the component.
`duration`	-	`string \| number` The animation duration in seconds.
`endColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation end.
`fadeDuration`	-	`string \| number` The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.
`fitContent`	`false`	`boolean` If `true`, the skeleton will take the width of it's children.
`lineClamp`	-	`number` The number of lines to display.
`rootProps`	-	`HTMLStyledProps` Props for the root element.
`startColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The color at the animation start.

類似のコンポーネント

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

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

Loadingは、データの読み込み中などの待機時間に表示するコンポーネントです。

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

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

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

EmptyStateはリソースが空または利用できない場合に表示するために使用されるコンポーネントです。

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