Skeleton
데이터 로딩 중 플레이스홀더 애니메이션.
Overview
Machine-readable contract from Component Spec.
component: skeletonexport: Skeletonversion: 1attributes: data-refineui=skeleton
Anatomy
| Part | data-refineui |
|---|---|
| root | skeleton |
Accessibility
| Slot | Element |
|---|---|
| skeleton | div |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokens사용법
섹션 제목: “사용법”import { Skeleton } from "@refineui/react";
<Skeleton width={200} height={20} />
<Skeleton width="100%" height={100} shape="circle" />API 레퍼런스
섹션 제목: “API 레퍼런스”| Prop | Default | Type | Description |
|---|---|---|---|
| width | — | number | string | 스켈레톤 너비(픽셀 또는 CSS 값). |
| height | — | number | string | 스켈레톤 높이(픽셀 또는 CSS 값). |
| shape | "rectangle" | "rectangle" | "circle" | 스켈레톤 모양. |