Skip to Content
ComponentsCalsCals Components

Cals Components

Cals 제품 전용 브랜딩이 적용된 컴포넌트 라이브러리입니다.

개요

Cals Components는 Foundation Components를 기반으로 Cals 제품의 요구사항에 맞게 확장한 컴포넌트 세트입니다. 원본 Vue(Element Plus) 기반 CALS 시스템의 기능을 React로 재현하며, controlStyle 기반 동적 스타일링을 지원합니다.

특징

  • Foundation 기반: 검증된 Foundation Components를 상속
  • 올인원 API: title, icon, visible, label, shortcut 등 편의 props 내장
  • 동적 색상 파생: backgroundColor만 지정하면 hover/active/disabled 색상 자동 계산
  • 토큰 오버라이드: controlStyle 항목이 있을 때만 디자인 토큰을 오버라이드
  • TypeScript 지원: 완벽한 타입 정의 제공

Foundation과의 차이점

특징FoundationCals
API 스타일children 기반title/icon prop 기반
색상 커스터마이징variant 선택 또는 classNamebackgroundColor prop → 상태별 자동 파생
FormItem 래핑외부에서 직접label/showLabel prop 내장
가시성 제어조건부 렌더링 직접visible prop 내장
단축키미지원shortcut prop 내장
포커스 제어ref 직접 접근useImperativeHandle (focus/blur/element)

컴포넌트 목록

Form (폼)

  • Button - 올인원 버튼 컴포넌트

빠른 시작

패키지 설치

pnpm add @vortex/ui-cals

컴포넌트 사용

import { Button } from "@vortex/ui-cals"
 
// 기본 사용
<Button title="저장" />
 
// 커스텀 색상 (hover/disabled 자동 파생)
<Button
  title="실행"
  backgroundColor="#16a34a"
  color="#fff"
/>
 
// 단축키 + FormItem 래핑
<Button
  title="검색"
  shortcut={[["ctrl", "k"], ["meta", "k"]]}
  showLabel
/>

다음 단계

Last updated on
ComponentsButton