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 > 빌더에서 생성불가

...

When to Use

버튼 컴포넌트를 사용하는 경우를 크게 5가지 케이스(일반적인 사용, URL 링크 연결, Feedback 단순 출력, 엑셀 사용, 기타 사용)로 구분한다.

Case_01.

...

Common Use

Case_02. Link URL

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

...

  1. Insert Image : 이미지 삽입

  2. Insert Video : 영상 삽입

  3. Insert Table : 테이블 삽입

  4. Unordered List : 글머리 기호 입력

  5. Ordered List : 번호 목록 입력

  6. Insert Horizontal Line : 수평형 라인 추가

  7. Full Screen : 입력 화면을 전체 Full 화면으로 확장

>>Error

...

  • Confirm : [Options > Input Confirm Title]에 텍스트만 입력하면 확인창 바로 사용 가능

...

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

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

...

Options_04. Icon, Hide Label/Border

...

Status
colourRed
titleneedcheck
Alert 옵션 명칭 확인 필요(Ant와 맞지 않음)

Setting

Result

Image RemovedImage Added

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

...