Skeleton

Skeleton

콘텐츠 로딩 상태를 나타내는 컴포넌트예요. 로딩 중인 콘텐츠의 플레이스홀더를 만들 때 Skeleton을 사용해요.

출처: 문서

본문

사용법 (Usage)

로딩 콘텐츠의 플레이스홀더를 만들려면 Skeleton을 사용해요. Skeleton은 다음 prop을 지원해요.

• height – 높이, 유효한 CSS 값
• width – 너비, 유효한 CSS 값
• radius – theme.radius의 키 또는 border-radius를 설정할 유효한 CSS 값
• circle – true면 width, height, border-radius가 height prop에 지정된 값과 같아져요
• animate – 기본값은 true로, 애니메이션을 제어해요

import { Skeleton } from '@mantine/core';

function Demo() {
  return (
    <>
      <Skeleton height={50} circle mb="xl" />
      <Skeleton height={8} radius="xl" />
      <Skeleton height={8} mt={6} radius="xl" />
      <Skeleton height={8} mt={6} width="70%" radius="xl" />
    </>
  );
}

콘텐츠와 함께 (With content)

이미 페이지에 있는 콘텐츠의 로딩 상태를 나타내려면 Skeleton으로 감싸고 visible prop으로 로딩 오버레이 표시 여부를 제어해요.

import { useState } from 'react';
import { Skeleton, Button } from '@mantine/core';

function Demo() {
  const [loading, setLoading] = useState(true);

  return (
    <>
      <Skeleton visible={loading}>
        Lorem ipsum dolor sit amet...
        {/* other content */}
      </Skeleton>

      <Button onClick={() => setLoading((l) => !l)} mt="md">
        Toggle Skeleton
      </Button>
    </>
  );
}

더 알아보기 (Learn more)

• SemiCircleProgress
• ActionBar