LinearProgress

Feedback & Status

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

Usage

알려진 작업 진행률을 넓은 영역의 가로 막대로 표시할 때 사용한다.

import

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

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

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

API Reference

LinearProgress Props

Prop

Type

Default

animated

boolean

true

borderColor

string

지정 안 함

color

string

지정 안 함

indicatorClassName

string

지정 안 함

max

number

100

overlay

ReactNode

지정 안 함

rounded

boolean

true

trackClassName

string

지정 안 함

trackStyle

CSSProperties

지정 안 함

value

number

같은 패밀리

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

ProgressBar

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

ProgressCircle

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

예제

기본 사용

값 68%인 막대를 보여준다. LinearProgress 는 자기 높이가 없어 트랙에 폭·높이를 직접 지정해야 한다.

코드

Open in Playground

import { VStack } from '@mildang/styled-system/jsx';
import { LinearProgress } from '@mildang/design-system/Progress';
import { css } from '@mildang/styled-system/css';

/** 두께는 컴포넌트가 아니라 호출자가 정한다. 4 / 8 / 12px 예시. */
const thin = css({ width: '[280px]', height: '[4px]' });

const base = css({ width: '[280px]', height: '[8px]' });

const thick = css({ width: '[280px]', height: '[12px]' });

const LinearProgressThicknessExample = () => (
    <VStack alignItems="flex-start" gap="16">
      <LinearProgress value={30} className={thin} />
      <LinearProgress value={68} className={base} />
      <LinearProgress value={100} className={thick} />
    </VStack>
  );

export default LinearProgressThicknessExample;