Page Comparison

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

...

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
    colour Yellow title new 21.03.17

15. SubButton

    Status
    colour Yellow title new 21.03.17

...

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

...

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

...

상태 정보

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

Normal	Focus	Hover
Image Added	Image Added	Image Added
Active(Pressed)	Disabled	Loading
Image Added	Image Added	X 미제공

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

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

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

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

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

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

   Status
   colour Blue title ex

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

...

셋팅 옵션

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

...

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

...

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

Setting	Result
Disable{ON}	Image RemovedImage Added

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

...