Skip to Content
ComponentsCalsInlineEditToolbar

InlineEditToolbar

목록/테이블의 인라인 편집 작업을 위한 도구 모음 컴포넌트

개요

InlineEditToolbar는 목록이나 테이블에서 행을 추가·수정·삭제·저장·취소하는 인라인 편집 작업을 제어하는 도구 모음입니다.

주요 특징

  • ✅ 모드 기반 상태 관리: addMode, editMode, deleteMode로 현재 편집 모드를 제어
  • ✅ 선택적 버튼 표시: showAdd, showEdit, showDelete, showSave로 개별 버튼 표시/숨김
  • ✅ 상호 배타적 비활성화: 한 모드가 활성일 때 다른 모드 버튼이 자동 비활성화
  • ✅ 삭제 모드 전환: 삭제 모드 진입 시 삭제 모드 버튼이 삭제 확인 버튼으로 교체
  • ✅ 가시성 제어: visible prop으로 전체 도구 모음 표시/숨김
  • ✅ 접근성: role=“toolbar”와 각 버튼의 aria-label 제공

기본 사용

showAdd, showEdit, showDelete, showSave prop으로 필요한 버튼을 선택적으로 표시합니다.

모드 전환

버튼 클릭 시 모드가 전환되고, 활성 모드에 따라 다른 버튼의 활성/비활성 상태가 자동으로 변경됩니다.

현재 모드: none

버튼 동작 규칙

버튼표시 조건비활성화 조건이벤트
추가showAddeditMode 또는 deleteMode 활성 (addMode 아닐 때)onAdd
수정showEditaddMode, editMode, deleteMode 중 하나 활성onEdit
삭제 모드showDelete & !deleteModeaddMode 또는 editMode 활성onDeleteMode
저장showSaveaddMode, editMode 모두 비활성onSave
삭제 확인showDelete & deleteMode-onDelete
취소항상 표시모든 모드 비활성onCancel

API Reference

Props

PropTypeDefault설명
visiblebooleantrue표시 여부
addModebooleanfalse추가 모드 활성 여부
editModebooleanfalse수정 모드 활성 여부
deleteModebooleanfalse삭제 모드 활성 여부
showAddbooleanfalse추가 버튼 표시 여부
showEditbooleanfalse수정 버튼 표시 여부
showDeletebooleanfalse삭제 관련 버튼 표시 여부
showSavebooleanfalse저장 버튼 표시 여부
classNamestring-컨테이너에 적용할 className

Events

EventType설명
onAdd() => void추가 버튼 클릭 시 호출
onEdit() => void수정 버튼 클릭 시 호출
onDeleteMode() => void삭제 모드 전환 버튼 클릭 시 호출
onDelete() => void삭제 확인 버튼 클릭 시 호출
onSave() => void저장 버튼 클릭 시 호출
onCancel() => void취소 버튼 클릭 시 호출

접근성

  • 컨테이너에 role="toolbar"와 aria-label="인라인 편집 도구 모음" 설정
  • 각 버튼에 aria-label로 기능 이름 제공 (추가, 수정, 삭제 모드, 저장, 삭제, 취소)
  • 비활성화된 버튼에 disabled 속성 자동 설정

관련 컴포넌트

  • Button - 개별 버튼 컴포넌트
Last updated on
ImageViewLabel