Skip to Content
ComponentsCalsLabel

Label

제목(title)과 데이터(data)를 조합하여 표시하는 읽기 전용 디스플레이 컴포넌트

개요

Cals Label은 원본 Vue QSLabel 컴포넌트를 React로 재구현한 것으로, 제목 텍스트와 데이터 값을 다양한 조합으로 표시합니다.

주요 특징

  • ✅ displayDataType: 제목/데이터 조합 모드 (titleAndData, title, data, dataAndTitle)
  • ✅ 데이터 포맷: @ 접두어, 천 단위 구분자 지원
  • ✅ 커스텀 스타일: backgroundColor, color, fontSize 등 개별 지정
  • ✅ FormItem 내장: label prop으로 폼 레이블 자동 래핑
  • ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
  • ✅ children 지원: data 대신 커스텀 콘텐츠 렌더링
  • ✅ 디자인 토큰: Foundation Label 토큰 시스템 호환

기본 사용

title과 data prop으로 제목과 데이터를 표시합니다.

홍길동
30
서울시 강남구

children 사용

children을 지정하면 data 대신 커스텀 콘텐츠를 표시합니다.

● 활성
바로가기

표시 모드 (displayDataType)

displayDataType으로 제목과 데이터의 배치를 결정합니다.

데이터
데이터만
데이터

데이터 포맷

@ 접두어 (atSign)

@user123
@admin

천 단위 구분자 (thousandSeparator)

1,234,567
51,000,000

커스텀 스타일

backgroundColor, color, fontSize, fontWeight, fontFamily, textAlign prop으로 스타일을 지정합니다.

분홍
파랑
18px
굵은 글씨

크기 (size)

Foundation Label의 size를 사용하여 제목 텍스트 크기를 제어합니다.

데이터
데이터
데이터
데이터
데이터

가시성 제어 (visible)

visible prop으로 선언적으로 표시/숨김을 제어합니다.

표시됨

FormItem 래핑 (label / showLabel)

label prop으로 레이블을 지정하거나, showLabel로 빈 레이블 공간을 표시합니다.

홍길동
1,234,567

API Reference

Props

PropTypeDefaultDescription
titlestring-표시할 제목 텍스트
datastring | number-표시할 데이터 값
displayDataType"titleAndData" | "title" | "data" | "dataAndTitle""titleAndData"표시 모드
atSignbooleanfalse데이터에 @ 접두어 추가
thousandSeparatorbooleanfalse숫자 데이터에 천 단위 구분자 적용
size"xs" | "sm" | "md" | "lg" | "xl""md"제목 텍스트 크기
visiblebooleantrue표시 여부 (false면 렌더링 안 함)
backgroundColorstring-배경색
colorstring-텍스트 색상
fontSizestring-폰트 크기
fontWeightstring | number-폰트 굵기
fontFamilystring-폰트 패밀리
textAlignCSSProperties["textAlign"]-텍스트 정렬
labelstring-FormItem 레이블 텍스트
showLabelbooleanfalse빈 레이블 공간 표시 (세로 정렬용)
classNamestring-컨테이너에 적용할 CSS 클래스
formClassNamestring-FormItem 래퍼에 적용할 CSS 클래스
styleCSSProperties-인라인 스타일 (토큰 오버라이드보다 우선)
childrenReactNode-데이터 대신 표시할 커스텀 콘텐츠

접근성

권장 사항

  • ✅ 의미 있는 title 텍스트 사용
  • ✅ FormItem label로 컨텍스트 제공
  • ✅ 데이터 포맷(thousandSeparator)으로 숫자 가독성 향상
  • ❌ 중요 정보를 color만으로 전달하지 않기 (색맹 고려)

관련 컴포넌트

Last updated on
ButtonFoundation Components