Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Skeleton

내용을 불러오는 동안 자리를 미리 보여 주는 로딩 placeholder 컴포넌트입니다.

import { Skeleton } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

데이터를 불러오는 동안 화면 구조를 먼저 보여 줄 때

로딩 후 레이아웃이 크게 흔들리지 않게 하고 싶을 때

사용예제

Basic

제목 한 줄과 문단 세 줄을 보여 줍니다.

Avatar & Round

avatar로 프로필 자리를, round로 둥근 막대를 표시합니다. paragraph.width는 줄마다 너비를 지정할 수 있습니다.

Active

active로 반짝이는 애니메이션을 켭니다. 동작 줄이기 설정을 켠 환경에서는 애니메이션이 멈춥니다.

loading이 false가 되면 children을 그대로 보여 줍니다.

import { useState } from "react";
import { Skeleton, Switch, Typography } from "sud-ui";

export default function Example() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      <Switch checked={loading} onChange={setLoading} ariaLabel="loading" />
      <Skeleton active loading={loading} avatar>
        <Typography>Soon UI Design</Typography>
      </Skeleton>
    </>
  );
}

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

false면 children을 보여 줍니다

boolean

true

active

반짝이는 애니메이션

boolean

false

avatar

아바타 자리 표시 (크기와 모양 지정 가능)

boolean | { size?: number | string; shape?: "circle" | "square" }

false

title

제목 줄

boolean | { width?: number | string }

true

paragraph

문단 줄 수와 너비

boolean | { rows?: number; width?: number | string | (number | string)[] }

3줄 (아바타가 있으면 2줄)

round

둥근 막대

boolean

false

baseColor

막대 기본 색상

string

neutral-2

highlightColor

반짝임 색상

string

neutral-3

ariaLabel

스크린리더에 읽히는 로딩 이름

string

className / style

추가 클래스와 스타일

string / CSSProperties

개인정보 처리방침

서비스 약관