이벤트 컴포넌트는 Button을 Event에 따라 세분화 한 것이다. 이 페이지에서는 모든 이벤트 버튼에 공통으로 적용되는 버튼 UI 유형과 상태 정보, 셋팅 옵션을 살펴보겠다. 이벤트 컴포넌트 종류와 각각의 상세 정보는 해당 링크를 참고 하자.

컴포넌트 종류

BackOffice Builder는 14개의 이벤트 컴포넌트를 제공한다.

UI 유형

ICE4에서 만들 수 있는 버튼은 총 5가지 유형으로 구분된다.

No	Basic Button	Description
1	Default Button	일반적인 기본 버튼
2	Primary Button	완료 혹은 권장을 알리는 강조 버튼
3	Text Button	테이블, 폼에 사용되는 가벼운 버튼 유형으로 보조적인 작업에 주로 사용
4	Icon Button	텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공
5	Text Button with Icon	기본 버튼에 아이콘을 추가한 형태

TOBE Text Button : Hide Border 토글버튼 필요

https://ionsdp.atlassian.net/browse/ICE4-1972

상태 정보

버튼의 상태는 아래와 같이 4가지로 표현되며, 모든 버튼 컴포넌트에 공통으로 적용되어 있다.

Normal	Hover
Active	Disabled

1. Normal : 사용자과 상호작용을 할 수 있는 기본 상태

2. Hover : 마우스 오버 상태로 상호작용이 가능함을 더욱 강력하게 어필

3. Active(Pressed) : 사용자가 버튼을 클릭/선택 한 상태를 네온 효과를 통해 강하게 표현함

4. Disable : 조건이 맞지 않아 사용할 수 없는 비활성화 상태

셋팅 옵션

BackOffice Builder의 Button > Setting > [Option] 설정을 통해 버튼 유형과 스타일을 변경한다.

EX ButtonLink 셋팅 화면

1. Size

버튼의 크기는 아래와 같이 3가지로 선택 할 수 있다.

Setting	Result

Label(버튼이름)에 입력된 텍스트 길이에 따라 버튼의 가로 길이는 가변적으로 변한다. 만약 특정 사이즈의 버튼이 필요하다면, Enable Style 토글버튼을 ON으로 변경하여 사용자가 직접 사이즈를 지정 할 수도 있다.

2. Shape

버튼의 모양은 사각형(Rectangle)과 원형(Circle) 2가지로 선택 할 수 있다.

Setting	Result

3. Type

총 5가지의 버튼 타입을 선택할 수 있다.

Setting	Result

• Default Type : 순위가 없는 일련의 작업 버튼 표현 시 사용

• Primary Type : 강조 버튼 타입으로, 보통 버튼 그룹당 최대 1개만 설정

• Ghost Type : 배경을 투명하게 만들고 텍스트 및 테두리 색상이 반전되는 버튼 타입으로, 컬러/복잡한 배경에서 주로 사용 (참고: Ant-Ghost)

NEEDCHECK 고스트와 Dashed 스타일 함께 사용 불가

• Dashed Type : 점선으로 둘러싸인 버튼 타입으로 일반적으로 작업을 추가하는데 사용

• Danger Type : 삭제 또는 승인과 같은 위험 기능에 사용됨 (참고: Ant-Danger)

4. Icon, Hide Label/Border

아이콘을 선택하여 아이콘이 들어간 버튼을 만들거나, Label(버튼이름)과 Border(테두리) 숨김 여부 설정에 따라 아이콘만 있는 버튼을 만들 수도 있다.

Setting	Result

아이콘을 선택하지 않고 Ghost Type을 선택 한 뒤, Hide Border를 ON으로 설정하면 텍스트 버튼이 된다.

Setting	Result

5. Enable Style

Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.

스타일 수정 방법은 아래와 같이 총 3가지 타입으로 진행할 수 있다.

• Simple CSS : 간단히 값만 입력

• Code CSS : 직접 코드를 작성

• Common CSS : 자주 사용되는 CSS를 선택

6. Disable

작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.

Setting	Result
Disable{ON}

https://ionsdp.atlassian.net/browse/ICE4-1991

7. Feedback

제공하는 Feedback 메시지는 총 3가지 타입이다.

• Alert : 페이지 우측 상단에 표시되는 경고성 메시지로 닫기 버튼과 아이콘이 표시됨

• PopConfirm : 사용자에게 확인을 요청하는 간단한 대화 상자형 메시지

• Modal : 사용자가 응용 프로그램과 상호 작용하도록 요구하지만, 새 페이지로 이동하여 사용자 Work Flow를 방해하지 않도록 현재 페이지 위에 새 플로팅 레이어를 띄워 만든 간단한 대화 상자형 메시지

Feedback 메시지를 사용 할 수 있는 상황은 2가지(버튼 이벤트 실행 전/후)로 구분 된다.

Setting
Result

Setting
Result

Setting
Result

※ 버튼 컴포넌트 각각의 Feedback 메시지 옵션 사용 가능 여부는 아래와 같다.