BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
...
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 클릭 시 엑셀 파일 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
...
When to Use
버튼 컴포넌트를 사용하는 경우를 크게 5가지 4가지 케이스(일반적인 사용, URL 링크 연결, Feedback 단순 출력, 엑셀 사용, 기타 사용)로 구분한다.
Case_01. Common Use
일반적으로 가장 많이 사용되는 버튼은 Create, Delete, Save, Execute 4가지다.
Case_02. Link URL
링크 버튼은 특정 URL을 버튼에 연결하는 경우 Link를 사용한다. 아래와 같이 11가지 타입으로 URL을 오픈 할 수 있다.
Modal : Modal로 출력
Page : Page로 이동
Window : 새로운 Window 창으로 출력
Page in Component :
Page In Modal
Page In Grid
Close Modal
Set ParentId
Function
Print
PDF
...
Feedback 메시지만 간단히 출력하면 되는 경우 Modal과 Confirm을 사용 할 수 있다사용한다.
Modal : 별도의 복잡한 셋팅 없이 답변을 바로 등록/수정 할 수 있도록 제공
...
아이콘을 클릭하면 작성에 필요한 7가지 설정 옵션이 보인다.
Insert Image : 이미지 삽입
Insert Video : 영상 삽입
Insert Table : 테이블 삽입
Unordered List : 글머리 기호 입력
Ordered List : 번호 목록 입력
Insert Horizontal Line : 수평형 라인 추가
Full Screen : 입력 화면을 전체 Full 화면으로 확장
>>Error
...
Confirm : [Options > Input Confirm Title]에 텍스트만 입력하면 확인창 바로 사용 가능
...
 |
|---|
...
Options_04. Icon, Hide Label/Border
...
| Status | ||||
|---|---|---|---|---|
|
Setting | Result |
 |   |
https://ant.design/components/popconfirm/
...