Toolbar
Foundation Toolbar를 래핑한 CALS 전용 도구 모음 컨테이너
개요
Toolbar 컴포넌트는 화면의 타이틀 영역과 도구 모음(ToolbarButton 등) 영역을 제공합니다. 원본 CALS Vue 컴포넌트(vQSToolbar)의 동작과 API를 React로 마이그레이션하였습니다.
주요 특징
- ✅ 타이틀 표시: title prop 또는 children으로 제목 텍스트 표시
- ✅ 도구 모음 영역: actions prop으로 ToolbarButton 등 도구 모음 임베드
- ✅ 스타일 오버라이드: 배경색, 글자색, 글꼴 등 타이틀 스타일을 prop으로 커스터마이즈
- ✅ TabPane 연결: tabPaneId prop으로 특정 탭 패널과 연결
기본 사용
title prop으로 툴바 상단에 제목을 표시합니다.
Preview
사용자 관리
도구 모음 영역 (actions)
actions prop에 ToolbarButton 등을 전달하여 도구 모음을 구성합니다.
Preview
사용자 관리
스타일 오버라이드
backgroundColor, color, fontFamily, fontSize, fontWeight, fontStyle prop으로 타이틀 영역 스타일을 커스터마이즈합니다.
Preview
배경색 + 글자색
굵게(900) + 이탤릭
커스텀 폰트
children 사용
children으로 커스텀 타이틀 콘텐츠를 제공하면 title보다 우선합니다.
Preview
커스텀 타이틀
표시 여부 제어
visible=false이면 컴포넌트가 렌더링되지 않습니다.
Preview
보이기/숨기기
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | - | 툴바 상단에 표시할 제목 텍스트 |
titleLevel | "h2" | "h3" | "h4" | "h4" | 제목 헤딩 레벨 |
visible | boolean | true | 화면 표시 여부 |
actions | ReactNode | - | 도구 모음 영역에 표시할 버튼 등 |
tabPaneId | string | - | 종속 탭 패널의 연결 ID |
backgroundColor | string | - | 컨테이너 배경색 |
color | string | - | 타이틀 글자색 |
fontFamily | string | - | 타이틀 글꼴 |
fontSize | string | - | 타이틀 글자 크기 |
fontWeight | string | number | boolean | - | 타이틀 굵기 (truthy이면 900 고정) |
fontStyle | string | - | 타이틀 기울기 |
className | string | - | 컨테이너에 적용할 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
children | ReactNode | - | title 대신 사용할 커스텀 타이틀 콘텐츠 |
접근성
권장 사항
- ✅ Foundation Toolbar가 적절한 시맨틱 구조를 보증합니다.
- ✅ 도구 모음 버튼에는 의미 있는 텍스트를 사용하세요.
관련 컴포넌트
- Foundation Toolbar: 기본 컴포넌트
- ToolbarButton: 도구 모음 전용 액션 버튼
- InlineEditToolbar: 인라인 편집 도구 모음
Last updated on