| Table of Contents |
|---|
...
이벤트 컴포넌트는 Button을 Event에 따라 세분화 한 것이다. 이 페이지에서는 모든 이벤트 버튼에 공통으로 적용되는 버튼 UI 유형과 상태 정보, 셋팅 옵션을 살펴보겠다. 이벤트 컴포넌트 종류와 각각의 상세 정보는 해당 링크를 참고 하자.
...
Summary
BackOffice Builder는 14개의 이벤트 컴포넌트를 제공한다.
No | Component | Description |
|---|---|---|
1 | ButtonLink | 특정 링크 오픈 버튼 |
2 | ButtonCreate | 신규 생성 버튼 |
3 | ButtonDelete | 선택 항목 삭제 버튼 |
4 | ButtonSave | 설정 내용 저장 버튼 |
5 | ButtonExecute | 선택 내용 실행 버튼 |
6 | ButtonConfirm | 확인창(Feedback) Modal 출력 버튼 |
7 | ButtonModal | Modal 출력 버튼 |
8 | ButtonPopup | 팝업 오픈 버튼 → Bo Builder에는 Form Fields로, 백오피스 가이드에는 Event로 구분되어 있음 |
9 | ButtonExcel | 엑셀 파일 다운로드 실행 버튼 |
10 | ButtonDownload | > 기능확인필요 |
11 | ButtonUploadExcel | 엑셀 업로드 창을 Modal로 출력하는 버튼 |
12 | ButtonSelect | > 기능확인필요 |
13 | ButtonCall | >빌더에서 생성 불가 |
14 | ButtonCallBackCheck | >빌더에서 생성 불가 |
- | ButtonDownloadExcel | BO빌더에는 없음, 확인 필요
|
...
...
Preview
ICE4에서 만들 수 있는 버튼은 총 5가지 유형으로 구분된다구분 할 수 있으며, 컴포넌트가 화면에 출력되는 UI는 다음과 같다.
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
...
...
Status Information
버튼의 상태는 아래와 같이 4가지로 표현되며, 모든 버튼 컴포넌트에 공통으로 적용되어 있다.
...
Normal : 사용자과 상호작용을 할 수 있는 기본 상태
Hover : 마우스 오버 상태로 상호작용이 가능함을 더욱 강력하게 어필
Active(Pressed) : 사용자가 버튼을 클릭/선택 한 상태를 네온 효과를 통해 강하게 표현함
Disable : 조건이 맞지 않아 사용할 수 없는 비활성화 상태
...
...
Setting Options
BackOffice Builder의 Button > Setting > [Option] 설정을 통해 버튼 유형과 스타일을 변경한다.
...
| Status | ||||
|---|---|---|---|---|
|
Dashed Type : 점선으로 둘러싸인 버튼 타입으로 일반적으로 작업을 추가하는데 사용
...
Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.
...
Setting
...
Result
...
Enable Style
스타일 수정 방법은 아래와 같이 총 3가지 타입으로 진행할 수 있다. ( 참고: https://ionsdp.atlassian.net
...
스타일 수정 방법은 아래와 같이 총 3가지 타입으로 진행할 수 있다.
/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 메시지는 총 3가지 타입이다.
...