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.sliderStyle.BarBackground = '#90dfc0'; |
| LineBackground | string | Line 배경 색 | Slider.sliderStyle.LineBackground= '#90dfc0'; |
| HandleColor | string | Handle 배경 색 | SlidersliderStyle..HandleColor= '#90dfc0'; |
| HandleBorderColor | string | Handle의 Border 색 | Slider.sliderStyle.HandleBorderColor= '#90dfc0'; |
| HoverHandleColor | string | Handle의 마우스 오버 했을 때의 배경 색 | Slider.sliderStyle.HoverHandleColor= '#90dfc0'; |
| FromToDataLabelBackgroundColor | string | From / To Data Label의 배경 색 | Slider.sliderStyle.FromToDataLabelBackgroundColor= '#90dfc0'; |
| FromToDataLabelTextColor | string | From / To Data Label의 폰트 색 | Slider.sliderStyle.FromToDataLabelTextColor= '#90dfc0'; |
| FromToDataLabelTextSize | string | From / To Data Label의 폰트 크기 | Slider.sliderStyle.FromToDataLabelTextSize= '13px'; |
| FromToDataLabelTextFont | string | From / To Data Label의 폰트 종류 | Slider.sliderStyle.FromToDataLabelTextFont= 'Courier'; |
| ActiveDataLabelBackgroundColor | string | Active Data Label의 배경 색 | Slider.sliderStyle.ActiveDataLabelBackgroundColor= '#90dfc0'; |
| ActiveDataLabelTextColor | string | Active Data Label의 폰트 색 | Slider.sliderStyle.ActiveDataLabelTextColor= '#90dfc0'; |
| ActiveDataLabelTextSize | string | Active Data Label의 폰트 크기 | Slider.sliderStyle.ActiveDataLabelTextSize= '13px'; |
| ActiveDataLabelTextFont | string | Active Data Label의 폰트 종류 | Slider.sliderStyle.ActiveDataLabelTextFont= 'Courier'; |
| ShadowColor | string | Shadow 색 | Slider.sliderStyle.ShadowColor = '#90dfc0'; |
| GridColor | string | Grid 색 | Slider.sliderStyle.GridColor = '#90dfc0'; |
| GridTextSize | string | Grid 폰트 크기 | Slider.sliderStyle.GridColor = '13px'; |
| GridTextFont | string | Grid 폰트 종류 | Slider.sliderStyle.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';
}
샘플 정보
변경 전/후 제품 버전 | 변경 전(제품 버전) |
|---|---|
변경 전
|
|
변경 후
|
|
