Progress

Progress

작업 상태에 대한 피드백을 사용자에게 제공하는 진행률 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

Progress로 작업 진행 상태를 표시해요. value, color, size, radius, striped, animated 등의 prop을 지원해요.

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

function Demo() {
  return <Progress value={40} />;
}

복합 컴포넌트 (Compound components)

Progress는 여러 섹션으로 나눌 수 있어요. Progress.Section과 Progress.Label을 사용해요.

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

function Demo() {
  return (
    <Progress.Root size="xl">
      <Progress.Section value={35} color="cyan">
        <Progress.Label>Documents</Progress.Label>
      </Progress.Section>
      <Progress.Section value={28} color="pink">
        <Progress.Label>Photos</Progress.Label>
      </Progress.Section>
      <Progress.Section value={15} color="orange">
        <Progress.Label>Other</Progress.Label>
      </Progress.Section>
    </Progress.Root>
  );
}

세로 방향 (Vertical orientation)

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

function Demo() {
  return (
    <Progress.Root orientation="vertical" h={200}>
      <Progress.Section value={35} color="cyan">
        <Progress.Label>Documents</Progress.Label>
      </Progress.Section>
      <Progress.Section value={28} color="pink">
        <Progress.Label>Apps</Progress.Label>
      </Progress.Section>
      <Progress.Section value={15} color="orange">
        <Progress.Label>Other</Progress.Label>
      </Progress.Section>
    </Progress.Root>
  );
}

툴팁과 함께 (With tooltips)

import { Progress, Tooltip } from '@mantine/core';

function Demo() {
  return (
    <Progress.Root size="xl">
      <Tooltip label="Documents – 35Gb">
        <Progress.Section value={35} color="cyan" />
      </Tooltip>
      <Tooltip label="Photos – 28Gb">
        <Progress.Section value={28} color="pink" />
      </Tooltip>
      <Tooltip label="Other – 15Gb">
        <Progress.Section value={15} color="orange" />
      </Tooltip>
    </Progress.Root>
  );
}

섹션 너비 전환 (Section width transition)

transitionDuration을 밀리초 단위 숫자로 설정하면 너비 전환을 활성화할 수 있어요.

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

function Demo() {
  const [value, setValue] = useState(50);
  return (
    <>
      <Progress value={value} transitionDuration={300} />
      <Button onClick={() => setValue(Math.random() * 100)} mt="md">
        Set random value
      </Button>
    </>
  );
}

예시: 세그먼트가 있는 진행률 (Example: progress with segments)

import { useState } from 'react';
import { Group, PasswordInput, Progress } from '@mantine/core';

const requirements = [
  { re: /[0-9]/, label: 'Includes number' },
  { re: /[a-z]/, label: 'Includes lowercase letter' },
  { re: /[A-Z]/, label: 'Includes uppercase letter' },
  { re: /[$&+,:;=?@#|'<>.^*()%!-]/, label: 'Includes special symbol' },
];

function getStrength(password: string) {
  let multiplier = password.length > 5 ? 0 : 1;

  requirements.forEach((requirement) => {
    if (!requirement.re.test(password)) {
      multiplier += 1;
    }
  });

  return Math.max(100 - (100 / (requirements.length + 1)) * multiplier, 10);
}

function getStrengthColor(strength: number) {
  switch (true) {
    case strength < 30: return 'red';
    case strength < 50: return 'orange';
    case strength < 70: return 'yellow';
    default: return 'teal';
  }
}

function Demo() {
  const [value, setValue] = useState('');
  const strength = getStrength(value);
  const color = getStrengthColor(strength);

  return (
    <div>
      <PasswordInput value={value} onChange={(e) => setValue(e.currentTarget.value)} placeholder="Enter password" label="Enter password" />
      <Progress mt="md" value={value.length === 0 ? 0 : strength} color={color} transitionDuration={0} />
    </div>
  );
}

Styles API

Progress는 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요.

Styles API 셀렉터:

• root – 루트 요소
• section – Progress.Section 루트 요소
• label – Progress.Label 루트 요소

접근성 (Accessibility)

• 진행률 섹션에는 role="progressbar" 속성이 있어요
• 진행률 섹션에는 현재 값이 담긴 aria-valuenow 속성이 있어요
• 컴포넌트가 다른 값을 지원하지 않으므로 aria-valuemin과 aria-valuemax 속성은 항상 0과 100으로 설정돼요

aria-label 속성으로 진행률에 라벨을 지정해요.

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

function Demo() {
  return <Progress value={40} aria-label="Download progress" />;
}

더 알아보기 (Learn more)

• Notification
• RingProgress