BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
...
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : Modal 형태로 간단한 입력폼(답변 등록/수정) 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 엑셀 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
...
ButtonLink Type
링크 버튼은 특정 URL을 11가지 타입으로 URL 오픈 할 수 있다.
...
Label(버튼이름)에 입력된 텍스트 길이에 따라 버튼의 가로 길이는 가변적으로 변한다. 만약 특정 사이즈의 버튼이 필요하다면, Enable Style 토글버튼을 ON으로 변경하여 Button Style을 사용자가 직접 지정할 사이즈를 지정 할 수도 있다.
...
...
Options_02. Shape
버튼의 모양은 사각형(Rectangle)과 원형(Circle) 2가지로 선택 할 수 있다.
...
  |
|---|
...
Options_04. Icon, Hide Label/Border
...
Setting | Result |
Enable Style |
설정 방법은 총 3가지로 Simple CSS로 값 설정, Code CSS 직접 작성, Common Code CSS 선택, 총 3가지 방법으로 설정 할 수 선택이 있다.
...
Options_06. Disable
작업을 사용 할 수 없도록 버튼을 비활성화 시켜야 한다면 Disable 옵션을 ON으로 설정한다.
Setting | Result |
Disable{ON} |
...
Options_07. Feedback
버튼 컴포넌트별 사용 가능한 Feedback 메시지 형태와 설정 옵션은 아래와 같다.
...
액션 이후 메시지 : 액션 실행 후 성공/실패 메시지는 alert 형태로 고정되어 출력된다.
...
Feedback 메시지를 사용 할 수 있는 상황은 2가지(버튼 이벤트 전/후)로 구분 된다.
| Info |
|---|
버튼 이벤트 이후 : 성공/실패 여부를 alert 형태로 고정 출력 |
| Info |
|---|
버튼 이벤트 이전 : 확인창을 popconfirm 또은 modal 형태 중 하나로 선택하여 사용 |
버튼 컴포넌트 각각의 Feedback 메시지 옵션 사용 가능 여부는 아래와 같다.
No | Component | Success | Error | Alert PopConfirm | 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 | ||||
|---|---|---|---|---|
|
Setting | Result |
 |  |
https://ant.design/components/popconfirm/
...