Versions Compared

Version Old Version 13 New Version 14
Changes made by

Binnie Hong

DXP Angela (Unlicensed)

Saved on

Key

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

...

...

...

...

...

...

...

...

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

Table of Contents

...

Component

버튼 클릭 시 발생하는 11가지 Event를 버튼 컴포넌트로 기본 제공한다.

  1. Link : 특정 링크 오픈

  2. Create : 신규 생성

  3. Delete : 선택 항목 삭제

  4. Save : 설정 내용을 저장

  5. Execute : 선택 내용 실행

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

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

  8. Excel : 엑셀 다운로드

  9. UploadExcel : 엑셀 업로드

  10. Select : ??

  11. Download : 다운로드

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

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

버튼 컴포넌트별 메시지 설정 옵션은 아래와 같다.

No

Component

Success

Error

Alert

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
colourRed
titleneedcheck
Alert 옵션 명칭 확인 필요(Ant와 맞지 않음)

Setting

Result

Image AddedImage Added

https://ant.design/components/popconfirm/

...

https://ant.design/components/alert/

...

...

링크 버튼은 특정 URL을 11가지 타입으로 오픈 할 수 있다.

  1. Modal

  2. Page

  3. Window

  4. Page in Component

  5. Page In Modal

  6. Page In Grid

  7. Close Modal

  8. Set ParentId

  9. Function

  10. Print

  11. PDF

...

Buttons_02~05. Create/Delete/Save/Excute

버튼 클릭 시

...

...

Buttons_06. Modal

...

...

Buttons_07. Comfirm

...

...

Buttons_08. Excel(Download)

클릭 시 아래와 같이 엑셀 다운로드가 실행된다.

...

...

Buttons_09. UploadExcel

클릭 시 아래와 같은 엑셀 업로드 창이 Modal 타입으로 출력된다.

...

...

UI

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

No

Basic Button

Description

1

Default Button

일반적인 기본 버튼

2

Primary Button

완료 혹은 권장을 알리는 강조 버튼

3

Text Button

테이블, 폼에 사용되는 가벼운 버튼 유형으로 보조적인 작업에 주로 사용

4

Icon Button

텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공

5

Text Button with Icon

기본 버튼에 아이콘을 추가한 형태

...

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

...

Setting

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

...

Status
colourBlue
titleex
ButtonLink 셋팅 화면

...

Options_01. Size

버튼의 크기는 아래와 같이 3가지로 선택 할 수 있다.만약 특정 사이즈의 버튼이 필요하다면, Enable 토글버튼을 ON으로 변경하여 Button Style을 사용자가 직접 지정할 수도 있다.

Setting

Result

...

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

...

...

Options_02. Shape

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

Setting

Result

...

Options_03. Type

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

Setting

Result

Image RemovedImage Added

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

...

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

...

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

...

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

...

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

...

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

Status
colourRed
titleneed check
Danger Button 칼라 확인 필요

...

Image Added

...

Options_04. Icon, Hide Label/Border

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

...

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

Setting

Result

...

Options_05. Disable, Enable Style

현재 설정 중인 버튼을 비활성화로 만들고 싶다면 작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다. Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.

Setting

Result

Disable{ON}

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

Enable Style

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

Component

ICE4는 8가지의 컴포넌트 버튼을 기본 제공한다.

...