ProgressCircle

Feedback & Status

완료 비율을 좁은 공간의 원형 트랙으로 나타내는 진행 인디케이터.

Usage

좁은 자리에서 진행률을 원형으로. 진행률을 모르면 Spinner

import

import { ProgressCircle } from '@mildang/design-system/Progress';

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ProgressCircle Props

Prop

Type

Default

changePoint

number

지정 안 함

className

string

지정 안 함

color

"green" | "orange"

green

contentType

"string" | "icon"

string

edge

"round" | "butt"

round

icon

ReactNode

지정 안 함

size

"md" | "sm"

type

"static" | "conditional"

지정 안 함

value

number

같은 패밀리

@mildang/design-system/Progress 에서 같이 내보내는 컴포넌트다.

LinearProgress

작업 진행 정도를 가로 막대 길이로 나타내는 인디케이터.

ProgressBar

완료 비율을 가로 막대와 값으로 나타내는 진행 표시줄.

좁은 공간의 진행률

ProgressCircle은 좁은 공간에서 진행률을 원형으로 보여준다. 진행률 자체를 알 수 없으면 Spinner를 사용한다.

기본 사용

좁은 공간에 진행률을 원형으로 표시한다.

코드

Open in Playground

import { HStack, VStack } from '@mildang/styled-system/jsx';
import { ProgressCircle } from '@mildang/design-system/Progress';

const ProgressCircleCompleteExample = () => (
    <VStack gap="16">
      <HStack gap="16">
        <ProgressCircle value={100} contentType="string" color="green" />
        <ProgressCircle value={100} contentType="string" color="orange" />
      </HStack>
      <HStack gap="16">
        <ProgressCircle value={100} size="sm" contentType="string" color="green" />
        <ProgressCircle value={100} size="sm" contentType="string" color="orange" />
      </HStack>
    </VStack>
  );

export default ProgressCircleCompleteExample;

예제

Static

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressCircle } from '@mildang/design-system/Progress';
import { HStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({ value: 50, contentType: 'string', type: 'static' }) } as ComponentProps<typeof ProgressCircle>;

const ProgressCircleStaticExampleRender = (args: ComponentProps<typeof ProgressCircle>) => (
    <HStack gap="16">
      <ProgressCircle {...args} color="green" />
      <ProgressCircle {...args} color="orange" />
    </HStack>
  );

export default function ProgressCircleStaticExample(props: Partial<ComponentProps<typeof ProgressCircle>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressCircle>;
  return ProgressCircleStaticExampleRender(mergedProps);
}

Conditional

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressCircle } from '@mildang/design-system/Progress';
import { HStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({ contentType: 'string', type: 'conditional', changePoint: 80 }) } as ComponentProps<typeof ProgressCircle>;

const ProgressCircleConditionalExampleRender = (args: ComponentProps<typeof ProgressCircle>) => (
    <HStack gap="16">
      <ProgressCircle {...args} value={30} />
      <ProgressCircle {...args} value={50} />
      <ProgressCircle {...args} value={80} />
      <ProgressCircle {...args} value={100} />
    </HStack>
  );

export default function ProgressCircleConditionalExample(props: Partial<ComponentProps<typeof ProgressCircle>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressCircle>;
  return ProgressCircleConditionalExampleRender(mergedProps);
}

StringType

코드

Open in Playground

import { HStack } from '@mildang/styled-system/jsx';
import { ProgressCircle } from '@mildang/design-system/Progress';

const ProgressCircleStringTypeExample = () => (
    <HStack gap="16">
      <ProgressCircle value={0} contentType="string" color="green" />
      <ProgressCircle value={50} contentType="string" color="green" />
      <ProgressCircle value={100} contentType="string" color="green" />
    </HStack>
  );

export default ProgressCircleStringTypeExample;

IconType

코드

Open in Playground

import { HStack } from '@mildang/styled-system/jsx';
import { ProgressCircle } from '@mildang/design-system/Progress';
import Book from '@mildang/icons/react/book';

const ProgressCircleIconTypeExample = () => (
    <HStack gap="16">
      <ProgressCircle value={0} contentType="icon" color="green" icon={<Book />} />
      <ProgressCircle value={50} contentType="icon" color="green" icon={<Book />} />
      <ProgressCircle value={100} contentType="icon" color="green" icon={<Book />} />
    </HStack>
  );

export default ProgressCircleIconTypeExample;

Sizes

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressCircle } from '@mildang/design-system/Progress';
import { HStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({ value: 50, contentType: 'string', color: 'green' }) } as ComponentProps<typeof ProgressCircle>;

const ProgressCircleSizesExampleRender = (args: ComponentProps<typeof ProgressCircle>) => (
    <HStack gap="16">
      <ProgressCircle {...args} size="md" />
      <ProgressCircle {...args} size="sm" />
    </HStack>
  );

export default function ProgressCircleSizesExample(props: Partial<ComponentProps<typeof ProgressCircle>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressCircle>;
  return ProgressCircleSizesExampleRender(mergedProps);
}

Edges

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ProgressCircle } from '@mildang/design-system/Progress';
import { HStack, VStack } from '@mildang/styled-system/jsx';

const STORY_DEFAULT_ARGS = { ...({}), ...({ contentType: 'string', color: 'green' }) } as ComponentProps<typeof ProgressCircle>;

const ProgressCircleEdgesExampleRender = (args: ComponentProps<typeof ProgressCircle>) => (
    <VStack gap="16">
      <HStack gap="16">
        <ProgressCircle {...args} edge="round" value={30} />
        <ProgressCircle {...args} edge="round" value={50} />
        <ProgressCircle {...args} edge="round" value={80} />
      </HStack>
      <HStack gap="16">
        <ProgressCircle {...args} edge="butt" value={30} />
        <ProgressCircle {...args} edge="butt" value={50} />
        <ProgressCircle {...args} edge="butt" value={80} />
      </HStack>
    </VStack>
  );

export default function ProgressCircleEdgesExample(props: Partial<ComponentProps<typeof ProgressCircle>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressCircle>;
  return ProgressCircleEdgesExampleRender(mergedProps);
}

Default

코드

Open in Playground

import type { ComponentProps } from 'react';
import Book from '@mildang/icons/react/book';
import { ProgressCircle } from '@mildang/design-system/Progress';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value: 50,
    contentType: 'string',
    type: 'static',
    color: 'green',
    size: 'md',
    edge: 'round',
    icon: <Book />,
  }) } as ComponentProps<typeof ProgressCircle>;

export default function ProgressCircleDefaultExample(props: Partial<ComponentProps<typeof ProgressCircle>> = {}) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ProgressCircle>;
  return <ProgressCircle {...mergedProps} />;
}