BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
| Table of Contents |
|---|
컴포넌트
BackOffice Builder는 13개의 버튼 컴포넌트를 제공한다.
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 클릭 시 엑셀 파일 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
UI 유형
ICE4에서 만들 수 있는 버튼은 총 5가지 유형으로 구분된다.
| Table of Contents |
|---|
...
Summary
BackOffice Builder는 4개의 이벤트 컴포넌트를 제공한다. 이벤트 컴포넌트는 Button을 Event에 따라 세분화 한 것이다. 이 페이지에서는 모든 이벤트 버튼에 공통으로 적용되는 버튼 UI 유형과 상태 정보, 셋팅 옵션을 살펴보자.
No | Component | Description |
|---|---|---|
1 | ButtonExecute |  선택 내용 실행 버튼 |
2 | ButtonLink |  특정 링크 오픈 버튼 |
3 | ButtonExcelDownload |  엑셀 다운로드를 진행하는 버튼 |
4 | ButtonExcelUpload |  엑셀 업로드 창을 Modal로 출력하는 버튼 |
...
Preview
이벤트 컴포넌트로 사용 되는 버튼은 총 5가지 유형으로 구분 할 수 있으며, 컴포넌트가 화면에 출력되는 UI는 다음과 같다.
1. Button Type
No | Basic Button | Description |
|---|---|---|
1 | Default Button |   일반적인 기본 버튼 |
2 | Primary Button |  완료 혹은 권장을 알리는 강조 버튼 |
3 | Text Button |  테이블, 폼에 사용되는 가벼운 버튼 유형으로 보조적인 작업에 주로 사용 |
4 | Icon Button |   텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공 |
5 | Text Button with Icon |  기본 버튼에 아이콘을 추가한 형태 |
| Status | ||||
|---|---|---|---|---|
|
https://ionsdp.atlassian.net/browse/ICE4-1972
...
2. Button Status
버튼의 상태는 아래와 같이 4가지로 표현되며, 모든 버튼 컴포넌트에 공통으로 적용되어 있다.
Normal | Hover |
|---|---|
 |  |
Active | Disabled |
 |  |
Normal : 사용자과 상호작용을 할 수 있는 기본 상태
Hover : 마우스 오버 상태로 상호작용이 가능함을 더욱 강력하게 어필
Active(Pressed) : 사용자가 버튼을 클릭/선택 한 상태를 네온 효과를 통해 강하게 표현함
Disable : 조건이 맞지 않아 사용할 수 없는 비활성화 상태
...
Setting Options
BackOffice Builder의 Button > Setting > [Option] 설정을 통해 버튼 유형과 스타일을 변경한다.Status
1. Size
버튼의 크기는 아래와 같이 3가지로 선택 할 수 있다.
...
Label(버튼이름)에 입력된 텍스트 길이에 따라 버튼의 가로 길이는 가변적으로 변한다. 만약 특정 사이즈의 버튼이 필요하다면, Enable Style 토글버튼을 ON으로 변경하여 사용자가 직접 사이즈를 지정 할 수도 있다.
...
2. Shape
버튼의 모양은 사각형(Rectangle)과 원형(Circle) 2가지로 선택 할 수 있다.
Setting | Result |
 |  |
3. Type
총 5가지의 버튼 타입을 선택할 수 있다.
Setting | Result |
 |  |
...
Ghost Type : 배경을 투명하게 만들고 텍스트 및 테두리 색상이 반전되는 버튼 타입으로, 컬러/복잡한 배경에서 주로 사용 (참고: Ant-Ghost)
...
| Status | ||||
|---|---|---|---|---|
|
Dashed Type : 점선으로 둘러싸인 버튼 타입으로 일반적으로 작업을 추가하는데 사용
...
Danger Type : 삭제 또는 승인과 같은 위험 기능에 사용됨 (참고: Ant-Danger)
...
...
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
...
4. Icon, Hide Label/Border
아이콘을 선택하여 아이콘이 들어간 버튼을 만들거나, Label(버튼이름)과 Border(테두리) 숨김 여부 설정에 따라 아이콘만 있는 버튼을 만들 수도 있다.
...
아이콘을 선택하지 않고 Ghost Type을 선택 한 뒤, Hide Border를 ON으로 설정하면 텍스트 버튼이 된다.
Setting | Result |
 |  |
5. Enable Style
Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.
...
Setting
...
Result
...
Enable Style
스타일 수정 방법은 아래와 같이 총 3가지 타입으로 진행할 수 있다. ( 참고: https://ionsdp.atlassian.net
...
설정 방법은 총 3가지로 Simple CSS로 값 설정, Code CSS 직접 작성, Common Code CSS 선택이 있다./wiki/spaces/ICE4P/pages/1555300766/Table+List#Style-Set-Detail )
Simple CSS: 간단히 값만 입력Code CSS: 직접 코드를 작성Common CSS: 자주 사용되는 CSS를 선택
6. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
Disable{ON} |
7. Feedback
Feedback 메시지를 사용 할 수 있는 상황은 2가지(버튼 이벤트 전/후)로 구분 된다.
| Info |
|---|
버튼 이벤트 이후 : 성공/실패 여부를 alert 형태로 고정 출력 |
...
| Info |
|---|
버튼 이벤트 이전 : 확인창을 popconfirm 또은 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/
...
 |