Versions Compared

Key

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

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
    colourYellow
    titlenew 21.03.17

  15. SubButton

    Status
    colourYellow
    titlenew 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

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

Status
colourYellowRed
titlenewtobe
Text Button : Hide Border 토글버튼 필요

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

...

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

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

...

Info

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

Setting

Image Added

Result

Image RemovedImage AddedImage Removed

Info

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

Setting

Image Added

Result

Image RemovedImage AddedImage Removed

Setting

Result

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

...