BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
| Table of Contents |
|---|
...
Component
버튼 클릭 시 발생하는 11가지 Event를 버튼 컴포넌트로 ICE4는 11가지 Event의 버튼 컴포넌트를 기본 제공한다.
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : Modal 형태로 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 클릭 시 엑셀 파일 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
| Status | ||||
|---|---|---|---|---|
|
...
Modal
...
Confirm
...
Excel(Download)
...
UploadExcel
...
...
ButtonLink Type
When to Use
버튼 컴포넌트를 사용하는 경우를 크게 5가지 케이스(일반적인 사용, URL 링크 연결, Feedback 단순 출력, 엑셀 사용, 기타 사용)로 구분한다.
Case_01. Basic Button
Case_02. Link URL
링크 버튼은 특정 URL을 11가지 타입으로 URL 오픈 할 수 있다.
Modal : Modal로 출력
Page : Page로 이동
Window : 새로운 Window 창으로 출력
Page in Component :
Page In Modal
Page In Grid
Close Modal
Set ParentId
Function
Print
PDF
Case_03. Simple Feedback
Feedback 메시지만 간단히 출력하면 되는 경우 Modal과 Confirm을 사용 할 수 있다.
Modal : 별도의 복잡한 셋팅 없이 답변을 바로 등록/수정 할 수 있도록 제공
...
아이콘을 클릭하면 작성에 필요한 7가지 설정 옵션이 보인다.
Insert Image : 이미지 삽입
Insert Video : 영상 삽입
Insert Table : 테이블 삽입
Unordered List : 글머리 기호 입력
Ordered List : 번호 목록 입력
Insert Horizontal Line : 수평형 라인 추가
Full Screen : 입력 화면을 전체 Full 화면으로 확장
>>Error
...
Confirm : [Options > Input Confirm Title]에 텍스트만 입력하면 확인창 바로 사용 가능
...
Case_04. Use Excel
엑셀 버튼은 크게 2가지로 다운로드와 업로드가 있다.
Excel :
...
UploadExcel : 별도의 복잡한 셋팅 없이 파일 업로드 창을 사용 할 수 있도록 제공
...
...
UI
ICE4에서는 만들 수 있는 버튼은 총 5가지 유형으로 구분된다.
...
 |
|---|
...
Options_04. Icon, Hide Label/Border
...
| Status | ||||
|---|---|---|---|---|
|
Setting | Result |
 |   |
https://ant.design/components/popconfirm/
...