Skeleton

콘텐츠 로딩 상태를 표시하는 플레이스홀더 컴포넌트입니다.

Installation

bash

npx axis-cli add skeleton

Usage

tsx

import { Skeleton } from '@axis-ds/ui-react'

export function Example() {
  return <Skeleton className="h-4 w-[250px]" />
}

Basic

Card Loading

tsx

// 카드 로딩 상태
<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>

Table Loading

tsx

// 테이블 로딩 상태
<div className="space-y-3">
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
  <Skeleton className="h-8 w-full" />
</div>

Complex Layout

Props

Prop	Type	Default	Description
`className`	`string`	-	크기 및 모양을 지정하는 CSS 클래스

className

Type:string

Default:-

크기 및 모양을 지정하는 CSS 클래스