Skeleton

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

장식용 플레이스홀더로 로딩 콘텐츠의 구조를 미리 봅니다. 부모 영역에 aria-busy와 읽을 수 있는 로딩 메시지를 주세요. 로딩이 끝나면 스켈레톤을 실제 콘텐츠로 교체하세요. 스팬의 크기를 직접 정하지 말고, 문단에는 lines를, 짧은 라벨에는 width를 주세요.

실제 데이터나 입력으로 취급하지 마세요. 예측할 수 없는 구조는 가짜 카드 여러 개 대신 범용 블록 하나를 보여주세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

decorative span; parent loading region owns announcements

키보드와 접근성

Skeleton은 항상 aria-hidden=true이며 포커스를 받지 않습니다. 부모가 로딩 상태를 한 번 알립니다. reduced motion에서는 펄스가 멈춥니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Skeleton } from '@surflane/ui'

<section aria-label='Environment' aria-busy={loading}>
  {loading ? <Skeleton shape='block' /> : <EnvironmentDetails />}
</section>
<p role='status'>{loading ? 'Loading environment…' : 'Environment loaded.'}</p>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰