Skeleton

@hua-labs/ui

v1.1.0

데이터를 불러오는 동안 콘텐츠 구조를 보여주는 로딩 플레이스홀더 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { Skeleton, SkeletonText, SkeletonCircle, SkeletonCard, SkeletonAvatar, SkeletonList, SkeletonTable } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 Skeleton

형태 변형

텍스트

원형

직사각형

둥근 모서리

애니메이션 타입

펄스

웨이브

쉬머

복합 Skeleton

아바타 Skeleton

사용자 프로필 Skeleton

이미지 Skeleton

리스트 Skeleton

카드 Skeleton & 테이블 Skeleton

카드 Skeleton

테이블 Skeleton

Props

이름	타입	기본값	설명
`variant`	`"text" \| "circular" \| "rectangular" \| "rounded"`	`"text"`	Skeleton 모양
`width`	`string \| number`	-	너비 (기본값은 variant에 따라 다름)
`height`	`string \| number`	-	높이 (기본값은 variant에 따라 다름)
`animation`	`"pulse" \| "wave" \| "shimmer"`	`"pulse"`	애니메이션 타입
`className`	`string`	-	추가 CSS 클래스

코드 예시

기본 사용법tsx

import { Skeleton } from '@hua-labs/ui';

// Basic text skeleton
<Skeleton />

// With custom width
<Skeleton width="50%" />

// Custom size
<Skeleton width={200} height={20} />

형태 변형tsx

// Text (default)
<Skeleton variant="text" />

// Circular (for avatars)
<Skeleton variant="circular" width={48} height={48} />

// Rectangular
<Skeleton variant="rectangular" height={120} />

// Rounded corners
<Skeleton variant="rounded" height={120} />

복합 Skeletontsx

import {
  SkeletonCard,
  SkeletonAvatar,
  SkeletonList,
  SkeletonTable
} from '@hua-labs/ui';

// Pre-built card skeleton
<SkeletonCard />

// Avatar with text
<SkeletonAvatar />

// List items
<SkeletonList />

// Table structure
<SkeletonTable />

접근성

•aria-hidden: Skeleton은 스크린 리더에서 숨겨집니다
•aria-label: 로딩 상태를 위한 aria-label 사용
•모션 감소: prefers-reduced-motion 설정 존중

Command Progress