Versions Compared

Version Old Version 40 New Version Current
Changes made by

DXP Angela

DXP Angela

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.

Table of Contents

컴포넌트

BackOffice Builder는 13개의 버튼 컴포넌트를 제공한다.

  1. Link : 특정 링크 오픈

  2. Create : 신규 생성

  3. Delete : 선택 항목 삭제

  4. Save : 설정 내용을 저장

  5. Execute : 선택 내용 실행

  6. Modal : 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력

  7. Confirm : 확인창(Feedback)이 Modal 타입으로 출력

  8. Excel : 클릭 시 엑셀 파일 다운로드 실행

  9. UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력

  10. Select : ??

  11. Download : 다운로드

  12. Call >빌더에서 생성 불가

  13. Call Back Check > 빌더에서 생성불가

  14. Popup

    Status
    colourYellow
    titlenew 21.03.17

  15. SubButton

    Status
    colourYellow
    titlenew 21.03.17

UI 유형

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

Table of Contents

...

Summary

BackOffice Builder는 4개의 이벤트 컴포넌트를 제공한다. 이벤트 컴포넌트는 Button을 Event에 따라 세분화 한 것이다. 이 페이지에서는 모든 이벤트 버튼에 공통으로 적용되는 버튼 UI 유형과 상태 정보, 셋팅 옵션을 살펴보자.

No

Component

Description

1

ButtonExecute

Image Added

선택 내용 실행 버튼

2

ButtonLink

Image Added

특정 링크 오픈 버튼

3

ButtonExcelDownload

Image Added

엑셀 다운로드를 진행하는 버튼

4

ButtonExcelUpload

Image Added

엑셀 업로드 창을 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
colourYellow
titlenew
Text Button : Hide Border 토글버튼 필요

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

상태 정보

2. Button Status

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

NormalFocus

Hover

Image Removed

Active(Pressed)

DisabledLoading

X

미제공

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

  2. Focus : 버튼이 선택되어 있는 상태로, 키보드 탭을 클릭하여 다음 요소로 이동 가능

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

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

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

  6. Loading(Progress) : 버튼을 눌렀을때 버튼 내에 진행률을 표시 (

    Status
    colourBlue
    titleex
    [다운로드], [저장] 버튼)

셋팅 옵션

...

Setting Options

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

1. Size

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

...

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

...

2. Shape

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

Setting

Result

3. Type

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

Setting

Result

...

Status
colourRed
titleneedcheck
고스트가 배경 투명 기능이라면, Dashed 스타일과 고스트와 Dashed 스타일 함께 사용 불가인지 확인 필요불가

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

...

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

...

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가지 타입으로 진행할 수 있다.

/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}

Image Removed

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

7. Feedback

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

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

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

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

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

Info

버튼 이벤트 실행 후 : 성공/실패 여부를 Alert 형태로 고정 출력

...

Setting

...

Result

...

...

Info

버튼 이벤트 실행 전 : 확인창을 PopConfirm 또은 Modal 형태 중 하나로 선택하여 사용

...

Setting

...

Result

...

...

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

No

Component

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

XImage Added