ToolbarForm

제목·도구 모음·입력 컨트롤 영역으로 구성된 접이식 폼 컨테이너 컴포넌트입니다.

개요

ToolbarForm은 Collapsible + Toolbar + Form 그리드를 결합한 복합 컴포넌트입니다. 헤더 영역에 제목과 도구 모음 버튼을, 콘텐츠 영역에 격자 레이아웃 입력 컨트롤을 배치합니다.

기본 사용법


import { ToolbarForm, Button } from "@vortex/ui-cals"
 
function SearchForm() {
  return (
    <ToolbarForm
      title="조건조회"
      actions={<Button label="검색" />}
    >
      <ToolbarForm.Col span={12}>
        <Text label="이름" />
      </ToolbarForm.Col>
      <ToolbarForm.Col span={12}>
        <Text label="이메일" />
      </ToolbarForm.Col>
    </ToolbarForm>
  )
}

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`	숨김 처리

접기/펴기

헤더를 클릭하면 콘텐츠 영역이 접히거나 펼쳐집니다.


{/* 초기 접힌 상태 */}
<ToolbarForm title="조건" defaultCollapsed>
  ...
</ToolbarForm>
 
{/* 접기 비활성화 — 항상 펼침 */}
<ToolbarForm title="조건" collapseDisabled>
  ...
</ToolbarForm>

도구 모음 위치

toolbarPosition prop으로 도구 모음을 헤더(상단) 또는 콘텐츠 하단에 배치합니다.


<ToolbarForm title="조건" toolbarPosition="bottom" actions={<Button label="검색" />}>
  ...
</ToolbarForm>

컴포넌트 스타일

헤더 영역의 배경색, 글자색, 테두리를 설정할 수 있습니다.


<ToolbarForm
  title="스타일"
  backgroundColor="#e8f5e9"
  color="#1b5e20"
  borderWidth="2px"
  borderColor="#4caf50"
>
  ...
</ToolbarForm>

읽기 전용

readOnly prop은 FormContext를 통해 자식 입력 컨트롤에 전파됩니다. 버튼/채널 버튼은 읽기 전용에서 제외됩니다.


<ToolbarForm title="조건" readOnly>
  ...
</ToolbarForm>

접근성

Collapsible trigger에 aria-expanded 속성이 자동 노출됩니다.
collapseDisabled 시 trigger에 aria-disabled가 설정됩니다.
콘텐츠 영역은 role="form"과 aria-label을 지원합니다.
읽기 전용 시 aria-readonly가 form 영역에 설정됩니다.