Skeleton
텍스트, 사각형, 원 형태로 레이아웃을 보존하는 로딩 플레이스홀더예요.
핵심 속성
shape은 text, rectangle, circle을 받고 기본값은 text예요. TRSkeleton은 기본적으로 쉬머 효과를 보여 줘요. 움직임 없는 플레이스홀더에는 animate={false}를 설정하세요. 크기는 레이아웃이나 style로 정해요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/skeleton.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSkeleton } from '@tinyrack/ui/components/skeleton';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
하나의 로딩 상태와 장식용 자식 고유 링크
레이블이 없는 스켈레톤은 기본적으로 aria-hidden이에요. 로딩 상태를 알려야 하면 한 영역에 접근 가능한 레이블을 배치하세요.
API
TRSkeleton은 네이티브 div의 속성, 이벤트, 스타일, React 19 ref를 전달해요.
| 속성 | 타입 | 기본값 | 용도 |
|---|---|---|---|
animate | boolean | true | 쉬머 애니메이션 활성화 |
shape | 'text' | 'rectangle' | 'circle' | 'text' | 기본 크기와 반경 선택 |
레이블이 없는 스켈레톤에는 aria-hidden="true"가 적용돼요. aria-label, aria-labelledby, aria-live, aria-busy 또는 role="status"를 추가하면 라이브 영역 하나로 바뀌어요. 모션 감소 설정을 켜면 쉬머가 멈춰요.
| CSS 토큰 | 기본값 | 용도 |
|---|---|---|
--tr-skeleton-fill | --tinyrack-skeleton-fill | 플레이스홀더 채움색 |
--tr-skeleton-highlight | --tinyrack-skeleton-highlight | 쉬머 강조색 |
--tr-skeleton-height | 형태별 레시피 | 플레이스홀더 높이 |
--tr-skeleton-circle-size | --tinyrack-space-3xl | 원의 너비와 높이 |
--tr-skeleton-radius | 형태별 레시피 | 모서리 반경 |
--tr-skeleton-duration | --tinyrack-duration-loading | 쉬머 지속 시간 |
--tr-skeleton-easing | --tinyrack-ease-linear | 쉬머 이징 |