Skip to Content
ComponentsCalsBoxLabel

BoxLabel

라벨 텍스트를 표시하는 읽기 전용 디스플레이 컴포넌트

개요

Cals BoxLabel은 원본 Vue QSBoxLabel 컴포넌트를 React로 재구현한 것으로, 라벨 텍스트를 다양한 스타일과 함께 표시합니다.

주요 특징

  • ✅ 라벨 표시: title prop으로 텍스트 표시
  • ✅ 커스텀 스타일: backgroundColor, color, fontSize, fontFamily, fontStyle, fontWeight, textAlign, borderWidth, borderColor 개별 지정
  • ✅ 가시성 제어: visible prop으로 선언적 표시/숨김
  • ✅ children 지원: title 대신 커스텀 콘텐츠 렌더링

기본 사용

title prop으로 라벨 텍스트를 표시합니다.

children 사용

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

텍스트 색상 (color)

color prop으로 텍스트 색상을 변경합니다.

배경색 (backgroundColor)

폰트 스타일

fontSize, fontFamily, fontStyle, fontWeight prop으로 폰트 스타일을 설정합니다.

텍스트 정렬 (textAlign)

테두리 (borderWidth, borderColor)

borderWidth, borderColor를 지정하면 자동으로 border-style: solid가 적용됩니다.

가시성 제어 (visible)

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

API Reference

Props

PropTypeDefaultDescription
titlestring-표시할 라벨 텍스트
visiblebooleantrue표시 여부 (false면 렌더링 안 함)
backgroundColorstring-라벨 영역 배경색
colorstring-텍스트 색상
fontSizestring-폰트 크기
fontFamilystring-폰트 패밀리
fontStylestring-폰트 스타일 (italic 등)
fontWeightstring | number-폰트 굵기
textAlignCSSProperties["textAlign"]-텍스트 정렬
borderWidthstring-라벨 영역 테두리 두께
borderColorstring-라벨 영역 테두리 색상
classNamestring-컨테이너에 적용할 CSS 클래스
styleCSSProperties-인라인 스타일 (스타일 오버라이드와 병합)
childrenReactNode-title 대신 표시할 커스텀 콘텐츠

접근성

권장 사항

  • ✅ 장식용 라벨은 자동으로 aria-hidden="true" 적용
  • ❌ 중요 정보를 color만으로 전달하지 않기 (색맹 고려)
Last updated on
BoxIconButton