SemiCircleProgress

SemiCircleProgress

반원 다이어그램으로 진행률을 표현하는 컴포넌트예요. 반원 형태의 진행률 표시줄을 만들어요.

출처: 문서

본문

사용법 (Usage)

SemiCircleProgress로 반원 진행률을 표시해요. value prop으로 값을 설정하고, label, fillDirection, orientation, size, thickness 등으로 모양을 제어할 수 있어요.

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

function Demo() {
  return <SemiCircleProgress value={60} label="60%" />;
}

빈 세그먼트 색상 변경 (Change empty segment color)

emptySegmentColor prop으로 빈 세그먼트의 색상을 변경할 수 있어요. theme.colors의 키 또는 유효한 CSS 색상 값을 받아요.

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

function Demo() {
  return <SemiCircleProgress value={60} emptySegmentColor="var(--mantine-color-gray-4)" />;
}

라벨 위치 변경 (Change label position)

기본적으로 라벨은 컴포넌트 하단에 표시돼요. labelPosition prop을 사용하면 위치를 center로 변경할 수 있어요.

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

function Demo() {
  return (
    <>
      <SemiCircleProgress value={60} label="Bottom" />
      <SemiCircleProgress value={60} label="Center" labelPosition="center" />
    </>
  );
}

채워진 세그먼트 전환 (Filled segment transition)

기본적으로 전환(transition)은 비활성화돼 있어요. 활성화하려면 transitionDuration prop에 밀리초 단위 숫자를 설정해요.

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

function Demo() {
  const [value, setValue] = useState(30);

  return (
    <>
      <SemiCircleProgress value={value} transitionDuration={300} label={`${value}%`} />
      <Button onClick={() => setValue(Math.floor(Math.random() * 100))} mt="xl" fullWidth>
        Set random value
      </Button>
    </>
  );
}

더 알아보기 (Learn more)

• RingProgress
• Skeleton