BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
...
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 클릭 시 엑셀 파일 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
...
버튼 UI 유형
ICE4에서는 만들 수 있는 버튼은 총 5가지 유형으로 구분된다.
...
| Status | ||||
|---|---|---|---|---|
|
...
...
1. Size
버튼의 크기는 아래와 같이 3가지로 선택 할 수 있다.
...
Label(버튼이름)에 입력된 텍스트 길이에 따라 버튼의 가로 길이는 가변적으로 변한다. 만약 특정 사이즈의 버튼이 필요하다면, Enable Style 토글버튼을 ON으로 변경하여 사용자가 직접 사이즈를 지정 할 수도 있다.
...
...
...
2. Shape
버튼의 모양은 사각형(Rectangle)과 원형(Circle) 2가지로 선택 할 수 있다.
Setting | Result |
 |  |
...
...
3. Type
총 5가지의 버튼 타입을 선택할 수 있다.
Setting | Result |
 |  |
...
 |
|---|
...
...
4. Icon, Hide Label/Border
아이콘을 선택하여 아이콘이 들어간 버튼을 만들거나, Label(버튼이름)과 Border(테두리) 숨김 여부 설정에 따라 아이콘만 있는 버튼을 만들 수도 있다.
...
아이콘을 선택하지 않고 Ghost Type을 선택 한 뒤, Hide Border를 ON으로 설정하면 텍스트 버튼이 된다.
Setting | Result |
 |  |
...
...
5. Enable Style
Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.
...
설정 방법은 총 3가지로 Simple CSS로 값 설정, Code CSS 직접 작성, Common Code CSS 선택이 있다.
...
...
6. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
Disable{ON} |
...
...
7. Feedback
Feedback 메시지를 사용 할 수 있는 상황은 2가지(버튼 이벤트 전/후)로 구분 된다.
...
| Status | ||||
|---|---|---|---|---|
|
Setting | Result |
 |  |
https://ant.design/components/popconfirm/
...