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가지 유형으로 구분된다.
No | Basic Button | Description |
|---|---|---|
1 | Default Button |  일반적인 기본 버튼 |
2 | Primary Button |  완료 혹은 권장을 알리는 강조 버튼 |
3 | Text Button |  테이블, 폼에 사용되는 가벼운 버튼 유형으로 보조적인 작업에 주로 사용 |
4 | Icon Button |   텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공 |
5 | Text Button with Icon |  기본 버튼에 아이콘을 추가한 형태 |
...
| Status | ||||
|---|---|---|---|---|
|
...
...
1. Size
버튼의 크기는 아래와 같이 3가지로 선택 할 수 있다.
...
| ||||||
|---|---|---|---|---|---|---|
|
...
4. Icon, Hide Label/Border
...
Setting | Result |
Enable Style |
설정 스타일 수정 방법은 총 3가지로 Simple CSS로 값 설정, Code CSS 직접 작성, Common Code CSS 선택이 있다.
...
아래와 같이 총 3가지 타입으로 진행할 수 있다.
Simple CSS: 간단히 값만 입력Code CSS: 직접 코드를 작성Common CSS: 자주 사용되는 CSS를 선택
...
...
6. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
Disable{ON} |
...
7. Feedback
제공하는 Feedback 메시지는 총 3가지 타입이다.
Alert: 페이지 우측 상단에 표시되는 경고성 메시지로 닫기 버튼과 아이콘이 표시됨PopConfirm: 사용자에게 확인을 요청하는 간단한 대화 상자형 메시지Modal: 사용자가 응용 프로그램과 상호 작용하도록 요구하지만, 새 페이지로 이동하여 사용자 Work Flow를 방해하지 않도록 현재 페이지 위에 새 플로팅 레이어를 띄워 만든 간단한 대화 상자형 메시지
Feedback 메시지를 사용 할 수 있는 상황은 2가지(버튼 이벤트 실행 전/후)로 구분 된다.
| Info |
|---|
...
| Info |
|---|
버튼 이벤트 이전실행 전 : 확인창을 popconfirm PopConfirm 또은 modal Modal 형태 중 하나로 선택하여 사용 |
버튼 컴포넌트 각각의 Feedback 메시지 옵션 사용 가능 여부는 아래와 같다.
No | Component | After Button Event | Before Button Event | Alert( Success | Error ) | PopConfirm | Modal | |||
|---|---|---|---|---|---|---|---|---|---|
1 | Link | X | X | X | O | ||||
2 | Create | O | O | O | O | ||||
3 | Delete | O | O | O | O | ||||
4 | Save | O | O | O | O | ||||
5 | Execute | O | O | O | O | ||||
6 | Modal | O | O | O | X | ||||
7 | Confirm | O | O | O | X | ||||
8 | Excel(Download) | X | X | X | X | ||||
9 | UploadExcel | X | X | X | X | ||||
10 | Select | X | X | X | X | ||||
11 | Download | X | X | X | X | ||||
| Status | ||||
|---|---|---|---|---|
|
...
Setting
...
Result
...
https://ant.design/components/popconfirm/
...
https://ant.design/components/alert/
...
https://ant.design/components/modal/
...