BadgeButton¶
목적¶
수량을 표시하고 관리할 수 있는 버튼을 생성하여 활용
주요 단계¶
1. Badge Button UI 생성¶
1.1. 원하는 위치에 Badge Button UI를 추가¶
<사진 1> Badge Button UI 설정 화면
1.2. Badge Button UI Properties¶
| Name | Description |
|---|---|
| activeBackgroundColor | 버튼 클릭 시 배경 색상 |
| activeColor | 버튼 클릭 시 아이콘 색상 |
| backgroundColor | 버튼 배경 색상 |
| badgeColor | 숫자 표시 배경 색상 |
| badgeCount | 버튼 우측 상단에 표시될 숫자 값 |
| badgeFontColor | 숫자 폰트 색상 |
| badgeFontSize | 숫자 폰트 크기 |
| color | 버튼 아이콘 색상 |
| height | 버튼 높이 |
| hoverBackgroundColor | 마우스를 올렸을 때 배경 색상 |
| hoverColor | 마우스를 올렸을 때 아이콘 색상 |
| size | 버튼 크기 설정 |
| src | 버튼 아이콘 이미지 경로 |
| tooltip | 버튼 위에 마우스를 올렸을 때 나타날 텍스트 |
| visible | 버튼 표시 여부 설정 |
| width | 버튼 너비 |
| styleClass | 적용할 CSS 클래스 |
2. Badge Button Property - backgroundColor, color¶
o 버튼의 기본 배경 색상 및 아이콘 색상 설정
<사진 2> Badge Button Property - backgroundColor, color 설정 화면
3. Badge Button Property - hoverBackgroundColor, hoverColor, Tooltip¶
o 마우스를 버튼 위에 올렸을 때 배경색, 아이콘 색상, 툴팁을 설정
<사진 3> Badge Button Property - hoverBackgroundColor, hoverColor, Tooltip 설정 화면
4. Badge Button Property - activeBackgroundColor, activeColor¶
o 버튼 클릭 시 배경색과 아이콘 색상이 변경됨
<사진 4> Badge Button Property - activeBackgroundColor, activeColor 설정 화면
5. Badge Button Property - badgeColor, badgeCount, badgeFontColor, badgeFontSize¶
o badgeCount 속성과 관련된 설정
<사진 5> Badge Button Property - badgeColor, badgeCount, badgeFontColor, badgeFontSize 설정 화면
| Name | Description |
|---|---|
| badgeColor | 숫자 배경 색상 설정 |
| badgeFontColor | 숫자 폰트 색상 설정 |
| badgeFontSize | 숫자 크기 설정 |
| badgeCount | 숫자 값 입력 |
6. Badge Button Events - Press¶
o 버튼 클릭 시 발생하는 이벤트 설정
<사진 6> Badge Button Events - Press Event 설정 화면