ToolbarForm
제목·도구 모음·입력 컨트롤 영역으로 구성된 접이식 폼 컨테이너 컴포넌트
개요
ToolbarForm은 Collapsible + Toolbar + Form 그리드를 결합한 복합 컴포넌트입니다. 헤더 영역에 제목과 도구 모음 버튼을, 콘텐츠 영역에 격자 레이아웃 입력 컨트롤을 배치합니다.
기본 사용법
Preview
Props
| Prop | Type | Default | 설명 |
|---|---|---|---|
title | ReactNode | - | 헤더에 표시할 제목 |
actions | ReactNode | - | 도구 모음 영역에 배치할 버튼 |
children | ReactNode | - | 폼 격자 영역에 배치할 컨트롤 |
visible | boolean | true | false이면 비렌더링 |
defaultCollapsed | boolean | false | 초기 접힘 상태 |
collapseDisabled | boolean | false | 접기/펴기 비활성화 |
toolbarPosition | 'top' | 'bottom' | 'top' | 도구 모음 영역 위치 |
columns | number | 24 | 격자 컬럼 수 |
colGap | number | 15 | 컨트롤 가로 간격 (px) |
rowGap | number | 20 | 컨트롤 세로 간격 (px) |
readOnly | boolean | false | 읽기 전용 (FormContext 전파) |
showLabel | boolean | true | 레이블 표시 여부 (FormContext 전파) |
labelPosition | 'left' | 'top' | 'hidden' | 'left' | 레이블 위치 (FormContext 전파) |
fullSize | boolean | false | 전체 화면 크기 확장 |
onLoad | () => void | - | 마운트 시 1회 호출 콜백 |
backgroundColor | string | - | 컴포넌트 전체 + 헤더 배경색 |
color | string | - | 헤더 제목 글자색 |
borderWidth | string | - | 헤더 테두리 두께 |
borderColor | string | - | 헤더 테두리 색상 |
className | string | - | 최외곽 wrapper CSS 클래스 |
style | CSSProperties | - | 최외곽 wrapper 인라인 스타일 |
aria-label | string | - | Form 영역 접근성 레이블 |
ToolbarForm.Col
격자 안에 컨트롤을 배치하는 열 컴포넌트입니다.
| Prop | Type | Default | 설명 |
|---|---|---|---|
span | number | 24 | 차지할 컬럼 수 |
offset | number | 0 | 시작 전 건너뛸 컬럼 |
hidden | boolean | false | 숨김 처리 |
접기/펴기
헤더를 클릭하면 콘텐츠 영역이 접히거나 펼쳐집니다.
Preview
항상 열려 있습니다
도구 모음 위치
toolbarPosition prop으로 도구 모음을 헤더(상단) 또는 콘텐츠 하단에 배치합니다.
Preview
컴포넌트 스타일
헤더 영역의 배경색, 글자색, 테두리를 설정할 수 있습니다.
Preview
배경색, 글자색, 테두리가 적용된 폼입니다
읽기 전용
readOnly prop은 FormContext를 통해 자식 입력 컨트롤에 전파됩니다.
버튼/채널 버튼은 읽기 전용에서 제외됩니다.
<ToolbarForm title="조건" readOnly>
...
</ToolbarForm>접근성
- Collapsible trigger에
aria-expanded속성이 자동 노출됩니다. collapseDisabled시 trigger에aria-disabled가 설정됩니다.- 콘텐츠 영역은
role="form"과aria-label을 지원합니다. - 읽기 전용 시
aria-readonly가 form 영역에 설정됩니다.
Last updated on