Skip to main content

매트릭 카드

숫자 데이터를 시각적으로 표시할 수 있습니다. 제목, 값, 설명을 포함할 수 있습니다.

프로퍼티​

프로퍼티타입설명
이름 (name)string매트릭 카드 컴포넌트의 고유 이름
제목 (title)string매트릭 카드 상단에 표시되는 제목
값 (value)string매트릭 카드에 표시될 값
형식 (format)MetricCardFormat값이 표시되는 형식
통화 형식 (currencyCode)string값 앞에 표시될 통화 코드
소수점 자릿수 (decimalPlaces)number0부터 20사이의 소수점 자릿수
자릿수 채우기 (isDecimalPlacesFilled)boolean설정된 소수점 자릿수만큼 0으로 채우는 기능 활성화 여부
콤마 표시 (useGrouping)boolean1,000의 자리마다 콤마 표시 여부
설명 표시 (isDescriptionVisible)boolean설명 표시 여부
설명 (description)string매트릭 카드 하단에 표시되는 설명
높이 (size)MetricCardSize매트릭 카드의 크기
숨김 (isHidden)string (boolean)배포된 페이지에서 매트릭 카드 숨김 여부

이름 (name)​

매트릭 카드 컴포넌트를 식별하는 고유한 이름입니다. 이름 규칙을 참고하세요.

제목 (title)​

매트릭 카드 상단에 표시되는 제목을 입력할 수 있습니다. (템플릿 텍스트 입력 가능)

값 (value)​

매트릭 카드에 표시될 값을 워크플로우의 실행 결과로 추가하거나 코드 또는 직접 값을 입력하여 설정할 수 있습니다.

형식 (format)​

값을 표시하는 방법입니다. 일반, 퍼센트, 통화 형식을 선택할 수 있습니다.

통화 형식 (currencyCode)​

형식이 통화인 경우 값 앞에 표시될 통화 코드를 선택할 수 있습니다.

소수점 자릿수 (decimalPlaces)​

최대 소수점 자리를 지정합니다. 0부터 20사이의 소수점 자리수를 입력할 수 있습니다.

자릿수 채우기 (isDecimalPlacesFilled)​

활성화하면 입력한 값의 소수점 자릿수가 설정된 소수점 자릿수보다 적을 경우 나머지 자릿수를 0으로 채웁니다.

콤마 표시 (useGrouping)​

활성화하면 1,000의 자리마다 콤마를 표시합니다.

설명 표시 (isDescriptionVisible)​

설명의 표시 여부를 설정합니다.

설명 (description)​

매트릭 카드 하단에 표시되는 설명을 입력할 수 있습니다. (템플릿 텍스트 입력 가능)

높이 (size)​

매트릭 카드의 높이를 설정합니다. sm, md, lg 중 선택할 수 있습니다.

숨김 (isHidden)​

컴포넌트의 숨김 상태를 입력할 수 있습니다.
워크플로우의 실행 결과를 사용하거나 직접 값을 입력하여 컴포넌트 숨김 상태를 설정할 수 있습니다.
값을 true로 설정할 경우, 배포된 상태에서는 컴포넌트가 숨겨지고 편집 상태에서는 불투명한 상태로 편집이 가능합니다.

타입 정의​

type MetricCardFormat = 'general' | 'percent' | 'currency';

type MetricCardSize = 'sm' | 'md' | 'lg';