Skeleton

ローディング中のプレースホルダーコンポーネント。

インポート

import { Skeleton } from '@caroainc/ui-components'

基本的な使い方

<Skeleton className="h-4 w-[200px]" />

カード風

<div className="flex items-center space-x-4">
  <Skeleton className="h-12 w-12 rounded-full" />
  <div className="space-y-2">
    <Skeleton className="h-4 w-[250px]" />
    <Skeleton className="h-4 w-[200px]" />
  </div>
</div>

テキストブロック

<div className="space-y-2">
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-3/4" />
</div>

Props

Prop	Type	Default	Description
`className`	`string`	`-`	サイズや形状を指定するCSSクラス

Previous

Separator

Next

Spinner

On this page

インポート基本的な使い方カード風テキストブロック Props