Dialog

다이얼로그/모달 컴포넌트

Dialog#

사용자에게 확인, 입력, 정보를 요청하는 모달 다이얼로그 컴포넌트입니다.

사용법#

// 확인 다이얼로그
CouiDialog.confirm(
  title: '삭제 확인',
  message: '이 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.',
  confirmLabel: '삭제',
  cancelLabel: '취소',
  onConfirm: handleDelete,
  onCancel: handleCancel,
)

// 커스텀 다이얼로그
CouiDialog(
  title: '프로필 편집',
  child: Column(
    children: [
      CouiInput(label: '이름', onChanged: handleNameChange),
      CouiInput(label: '이메일', onChanged: handleEmailChange),
    ],
  ),
  actions: [
    CouiButton.ghost(onPressed: handleCancel, child: Text('취소')),
    CouiButton(onPressed: handleSave, child: Text('저장')),
  ],
)

// 다이얼로그 열기
showCouiDialog(
  context: context,
  builder: (context) => CouiDialog.confirm(
    title: '확인',
    message: '진행하시겠습니까?',
    onConfirm: handleConfirm,
  ),
);

Dialog.confirm(
  title: '삭제 확인',
  message: '이 항목을 삭제하시겠습니까?',
  confirmLabel: '삭제',
  onConfirm: handleDelete,
  onCancel: handleCancel,
)

Dialog(
  title: '프로필 편집',
  children: [
    Input(label: '이름'),
    Input(label: '이메일'),
  ],
  actions: [
    Button.ghost(onClick: handleCancel, child: Text('취소')),
    Button(onClick: handleSave, child: Text('저장')),
  ],
)

Props / Parameters#

속성	타입	기본값	설명
`title`	`String?`	`null`	다이얼로그 제목
`message`	`String?`	`null`	내용 메시지
`actions`	`List<Widget>?`	`null`	하단 액션 버튼
`dismissible`	`bool`	`true`	외부 클릭으로 닫기 허용
`child`	`Widget?`	`null`	커스텀 내용
`size`	`DialogSize`	`md`	다이얼로그 크기

변형 (Variants)#

알림 다이얼로그#

CouiDialog.alert(
  title: '오류',
  message: '네트워크 연결에 실패했습니다.',
  onClose: handleClose,
)

크기#

CouiDialog(title: '작은 대화상자', size: DialogSize.sm, child: content)
CouiDialog(title: '큰 대화상자', size: DialogSize.lg, child: content)
CouiDialog(title: '전체 화면', size: DialogSize.fullscreen, child: content)