Component

Skeleton

콘텐츠를 짧게 불러오는 동안 레이아웃을 유지합니다.

Playground

옵션을 조절하며 화면과 사용 코드를 함께 확인하세요.

PC 1280px

Controls

shape가 block일 때 도형 크기에 적용됩니다.

보조 기술에 전달하는 로딩 안내

placeholder 배경의 강도

예고할 콘텐츠 형태

원형 모서리 · 원형 아바타 자리 표시자

text 형태에서 생성할 줄 수

pulse 애니메이션

Code

import { Skeleton } from '@amineslab/ui'

export default function ExamplePreview() {
  return ((<Skeleton animated={true} height={undefined} label={"불러오는 중"} lines={3} rounded={false} shape={"text"} variant={"subtle"} width={undefined}/>))
}

Props

@amineslab/ui에서 Skeleton를 가져옵니다.

import { Skeleton } from '@amineslab/ui'

`Skeleton`

HTML <div> 요소의 표준 속성을 그대로 받습니다.

Name	Type	Default	Description
`variant`	`'subtle' \| 'strong'`	`'subtle'`	자리 표시자 배경의 강도를 정합니다.
`shape`	`'text' \| 'block'`	`'text'`	text는 lines만큼 행을 그리고, block은 width·height로 크기를 정합니다.
`rounded`	`boolean`	`false`	모서리를 완전한 원형으로 만듭니다. 원형 아바타 자리 표시자에 씁니다.
`animated`	`boolean`	`true`	pulse 애니메이션 표시 여부를 정합니다.
`width`	`number \| string`	-	자리 표시자의 너비입니다.
`height`	`number \| string`	-	자리 표시자의 높이입니다.
`lines`	`number`	`1`	text 형태에서 만들 줄 수를 정하는 기존 호환 prop입니다.
`label`	`string`	-	로딩 상태를 보조 기술에 알리는 이름입니다.

Examples

자주 쓰는 조합을 살펴보고, 필요한 예시의 코드를 펼쳐 확인하세요.

Profile placeholder

실제 레이아웃과 같은 형태로 조합합니다.

import { type ComponentPropsWithoutRef } from 'react'

import { cn } from '@amineslab/ui/utils'

import { Skeleton } from '@amineslab/ui'

function ExampleSkeletonProfileDetails({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
    return <div {...props} className={cn('flex-1', className)}/>;
}

function ExampleSkeletonProfile({ className, ...props }: ComponentPropsWithoutRef<'div'>) {
    return <div {...props} className={cn('flex w-full max-w-80 gap-3', className)}/>;
}

export default function ExamplePreview() {
  return ((<ExampleSkeletonProfile>
          <Skeleton height={40} label="프로필" rounded shape="block" width={40}/>
          <ExampleSkeletonProfileDetails>
            <Skeleton label="이름과 소개" lines={2}/>
          </ExampleSkeletonProfileDetails>
        </ExampleSkeletonProfile>))
}

사용 기준

권장하는 사용

나타날 콘텐츠의 모양과 대략적인 크기를 반영합니다.

피해야 할 사용

오류나 빈 상태를 skeleton으로 숨기지 마세요.

접근성

화면에 맞는 이름을 제공하고, 키보드만으로 작업을 마칠 수 있는지 확인하세요.

이 컴포넌트에는 별도의 키보드 조작이 필요하지 않습니다.