BackOffice Builder에서 제공하는 버튼 컴포넌트 종류와 버튼 UI 셋팅 방법을 간략히 소개한다.
...
Link : 특정 링크 오픈
Create : 신규 생성
Delete : 선택 항목 삭제
Save : 설정 내용을 저장
Execute : 선택 내용 실행
Modal : 간단한 입력폼(답변 등록/수정)을 Modal 타입으로 출력
Confirm : 확인창(Feedback)이 Modal 타입으로 출력
Excel : 클릭 시 엑셀 파일 다운로드 실행
UploadExcel : 엑셀 업로드 창이 Modal 타입으로 출력
Select : ??
Download : 다운로드
Call >빌더에서 생성 불가
Call Back Check > 빌더에서 생성불가
Popup
Status colour Yellow title new 21.03.17 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 |   텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공 |
5 | Text Button with Icon |  기본 버튼에 아이콘을 추가한 형태 |
...
https://ionsdp.atlassian.net/browse/ICE4-1972
...
상태 정보
버튼의 상태는 아래와 같이 5가지로 4가지로 표현되며, 모든 버튼 컴포넌트에 공통으로 적용되어 있다.
...
Normal : 사용자과 상호작용을 할 수 있는 기본 상태
Hover : 마우스 오버 상태로 상호작용이 가능함을 더욱 강력하게 어필
Active(Pressed) : 사용자가 버튼을 클릭/선택 한 상태를 네온 효과를 통해 강하게 표현함
Disable : 조건이 맞지 않아 사용할 수 없는 비활성화 상태
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
...
| Status | ||||
|---|---|---|---|---|
|
...
...
셋팅 옵션
BackOffice Builder의 Button > Setting > [Option] 설정을 통해 버튼 유형과 스타일을 변경한다.
...
| Status | ||||
|---|---|---|---|---|
|
Dashed Type : 점선으로 둘러싸인 버튼 타입으로 일반적으로 작업을 추가하는데 사용
...