Start Release No : 7.0.400.20230209 / Update Release No :
프로젝트명 : (BCRM#D4258) Slider 차트 문의
작성자 : 김예슬 / 검수자 :
| 기능 정보 |
|
|
|
|
|
|
|---|
기능 설명
개요
Slider 컨트롤의 스타일을 변경할 수 있는 API가 추가되었습니다.
Slider 구조
■ Bar
■ Line
■ Handle
■ FromToDataLabel
■ ActiveDataLabel
■ Grid
API 구조
■ Property
Property Name | Data Type | 설명 | 사용 예시 |
|---|---|---|---|
| BarBackground | string | Bar 배경 색 | Slider.BarBackground = '#90dfc0'; |
| LineBackground | string | Line 배경 색 | Slider.LineBackground= '#90dfc0'; |
| HandleColor | string | Handle 배경 색 | Slider.HandleColor= '#90dfc0'; |
| HandleBorderColor | string | Handle의 Border 색 | Slider.HandleBorderColor= '#90dfc0'; |
| HoverHandleColor | string | Handle의 마우스 오버 했을 때의 배경 색 | Slider.HoverHandleColor= '#90dfc0'; |
| FromToDataLabelBackgroundColor | string | From / To Data Label의 배경 색 | Slider.FromToDataLabelBackgroundColor= '#90dfc0'; |
| FromToDataLabelTextColor | string | From / To Data Label의 폰트 색 | Slider.FromToDataLabelTextColor= '#90dfc0'; |
| FromToDataLabelTextSize | string | From / To Data Label의 폰트 크기 | Slider.FromToDataLabelTextSize= '13px'; |
| FromToDataLabelTextFont | string | From / To Data Label의 폰트 종류 | Slider.FromToDataLabelTextFont= 'Courier'; |
| ActiveDataLabelBackgroundColor | string | Active Data Label의 배경 색 | Slider.ActiveDataLabelBackgroundColor= '#90dfc0'; |
| ActiveDataLabelTextColor | string | Active Data Label의 폰트 색 | Slider.ActiveDataLabelTextColor= '#90dfc0'; |
| ActiveDataLabelTextSize | string | Active Data Label의 폰트 크기 | Slider.ActiveDataLabelTextSize= '13px'; |
| ActiveDataLabelTextFont | string | Active Data Label의 폰트 종류 | Slider.ActiveDataLabelTextFont= 'Courier'; |
| ShadowColor | string | Shadow 색 | Slider.ShadowColor = '#90dfc0'; |
| GridColor | string | Grid 색 | Slider.GridColor = '#90dfc0'; |
| GridTextSize | string | Grid 폰트 크기 | Slider.GridColor = '13px'; |
| GridTextFont | string | Grid 폰트 종류 | Slider.GridColor = 'Courier'; |
■ Method
| Method Name | Returns | 설명 | 사용 예시 |
|---|---|---|---|
| Clear() | void | Slider의 스타일을 초기화시킵니다 |
사용 예제
예제 코드
var Slider = null;
var initControlVariables = function(){
Slider = Matrix.getObject("Slider");
setSliderGreen();
};
initControlVariables();
function setSliderGreen(){
var green = {
bar: '#82d173',
line: '#dbf4a7',
handle: '#b6e94c',
hadleHover: '#91ba3c',
fromtoBgColor: '#416839',
activeBgColor: '#51ba3d',
text: 'white',
grid: '#c273d1'
};
// Slider의 스타일 객체 : Slider.sliderStyle
Slider.sliderStyle.BarBackground = green.bar;
Slider.sliderStyle.LineBackground = green.line;
Slider.sliderStyle.HandleColor = green.handle;
Slider.sliderStyle.HoverHandleColor = green.hadleHover;
Slider.sliderStyle.FromToDataLabelBackgroundColor = green.fromtoBgColor;
Slider.sliderStyle.FromToDataLabelTextColor = green.text;
Slider.sliderStyle.ActiveDataLabelBackgroundColor = green.activeBgColor;
Slider.sliderStyle.GridColor = green.grid;
Slider.sliderStyle.HandleBorderColor = green.activeBgColor;
Slider.sliderStyle.GridTextFont = 'Courier';
}
샘플 정보
- 샘플 URL :
- 샘플 파일
변경 전/후 제품 버전 | 변경 전(제품 버전) |
|---|---|
변경 전
|
|
변경 후
|
|
문서 수정 이력
| 버전 | 날짜 | 댓글 |
|---|---|---|
| 현재 버전 (v. 1) | 2024-01-12 18:25 | AUD팀 |
| v. 13 | 2024-03-27 10:39 | 품질기술팀 |
| v. 12 | 2024-03-19 15:51 | 품질기술팀 |
| v. 11 | 2024-03-19 13:32 | 품질기술팀 |
| v. 10 | 2024-03-19 13:31 | 품질기술팀 |
| v. 9 | 2024-03-19 13:30 | 품질기술팀 |
| v. 8 | 2024-03-19 13:29 | 품질기술팀 |
| v. 7 | 2024-03-19 13:29 | 품질기술팀 |
| v. 6 | 2024-03-19 13:13 | 품질기술팀 |
| v. 5 | 2024-03-19 11:14 | 품질기술팀 |
| v. 4 | 2024-03-12 15:51 | 품질기술팀 |
| v. 3 | 2024-01-15 08:45 | AUD팀 |
| v. 2 | 2024-01-12 18:26 | AUD팀 |
| v. 1 | 2024-01-12 18:25 | AUD팀 |
BCRM 정보
(BCRM접수번호)제목
...