ICE4에서는 6가지 5가지 유형의 버튼을 만들어 사용할 만들어서 사용 할 수 있다.
...
Default Button |
---|
...
일반적인 기본 버튼 | |
---|---|
Primary Button |
...
완료 혹은 권장을 알리는 강조 |
...
버튼 |
...
Text Button |
...
테이블, |
...
폼에 사용되는 가벼운 버튼 유형으로 보조적인 작업에 주로 사용 |
Icon Button |
...
텍스트 없이 아이콘으로만 표현된 버튼으로 시각적 단서 제공 | |
Text Button with Icon |
...
기본 버튼에 아이콘을 추가한 형태 |
...
...
Button
...
Button UI Setting
BackOffice Builder의 Button > Setting > [Option] 설정을 통해 버튼 유형과 스타일을 변경한다.
...
Setting | Result |
Status | ||||
---|---|---|---|---|
|
...
...
Options_02. Shape
버튼의 모양은 사각형(Rectangle)과 원형(Circle) 2가지로 선택 할 수 있다.
Setting | Result |
...
Options_03. Type
버튼의 타입은 총 5가지를 제공한다선택할 수 있다.
Setting | Result |
Default Type :
...
순위가 없는 일련의 작업
...
버튼 표현 시 사용
...
Primary Type :
...
Status | ||||
---|---|---|---|---|
|
...
강조 버튼 타입으로, 보통 버튼 그룹당 최대 1개만 설정
...
Ghost Type : 버튼의 배경을 투명하게 만들며, 일반적으로 컬러 배경에서 사용 (참고: Ant-Ghost)
...
Dashed Type : 점선으로 둘러싸인 버튼 타입으로 일반적으로 작업을 추가하는데
...
사용
...
Danger Type : 삭제 또는 승인과 같은 위험
...
기능에 사용됨 (참고: Ant-Danger)
...
Status | ||||
---|---|---|---|---|
|
Status | ||||
---|---|---|---|---|
|
...
...
Options_04. Icon
...
, Hide Label/Border
아이콘을 선택하여 아이콘이 들어간 버튼을 만들거나, Label(버튼이름)과 Border(테두리) 숨김 여부 설정에 따라 아이콘만 있는 버튼을 만들 수도 있다.
Setting | Result |
아이콘을 선택하지 않고 Ghost Type을 선택 한 뒤, Hide Border를 ON으로 설정하면 텍스트 버튼이 된다.
Setting | Result |
...
Options_05. Disable
...
, Enable Style
현재 설정 중인 버튼을 비활성화로 만들고 싶다면 Disable 옵션을 ON으로 설정한다. Enable Style을 활용하여 버튼 텍스트의 사이즈와 정렬, 글자와 버튼 칼라, 버튼의 사이즈(Width/Height)와 폰트 배치(Padding/Margin) 등을 직접 설정 할 수 있다.
...