Slider
고정된 옵션 집합을 따라 핸들을 이동하여 숫 자 값을 선택하는 기본 컨트롤입니다.
사용법
{
type: "slider",
key?: string | string[],
wrap?: boolean, // 기본값: false
disabled?: boolean, // 기본값: false
hidden?: boolean, // 기본값: false
css?: string,
padding?: string | number,
height?: string | number | "content", // 기본값: "content"
width?: string | number | "content", // 기본값: "content"
inverse?: boolean, // 기본값: false
majorTick?: number,
max?: number, // 기본값: 100
min?: number, // 기본값: 0
mode?: "vertical" | "horizontal", // 기본값: "horizontal"
range?: boolean, // 기본값: false
step?: number, // 기본값: 1
tick?: number,
tickTemplate?: (position: number) => string,
tooltip?: boolean, // 기본값: true
// `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
label?: string,
labelWidth?: string | number,
labelPosition?: "left" | "top", // 기본값: "top"
// 서비스 속성 및 메서드
$on?: { [eventName: string]: function },
$handler?: function,
$setValue?: function,
$layout?: function
}
설명
기본 속성
type- (필수) 컨트롤의 유형입니다."slider"로 설정합니다key- (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다wrap- (선택 사항) 외부 래핑(wrapping) 표시 여부를 설정합니다. 기본값은 false입니다disabled- (선택 사항) 컨트롤의 활성화(false) 또는 비활성화(true) 여부를 지정합니다. 기본값은 false입니다hidden- (선택 사항) 컨트롤의 숨김 여부를 지정합니다. 기본값은 false입니다css- (선택 사항) 컨트롤에 스타일 클래스를 추가합니다height- (선택 사항) 컨트롤의 높이입니다. 기본값은"content"입니다width- (선택 사항) 컨트롤의 너비입니다. 기본값은"content"입니다padding- (선택 사항) 셀과 slider 컨트롤 테두리 사이의 여백(padding)을 설정합니다inverse- (선택 사항) 반전된(inverse) slider 모드를 활성화/비활성화합니다. 기본값은 false입니다majorTick- (선택 사항) slider 눈금에 숫자 값을 렌더링하는 간격을 설정합니다max- (선택 사항) slider의 최댓값입니다. 기본값은 100입니다min- (선택 사항) slider의 최솟값입니다. 기본값은 0입니다mode- (선택 사항) slider 눈금의 방향입니다. 기본값은"horizontal"입니다range- (선택 사항) slider에서 값의 범위 선택 여부를 활성화/비활성화합니다. 기본값은 false입니다step- (선택 사항) slider 핸들이 이동하는 단위(step)입니다. 기본값은 1입니다tick- (선택 사항) slider 눈금을 렌더링하기 위한 단계 간격을 설정합니다tickTemplate- (선택 사항) 눈금에 값을 렌더링하기 위한 템플릿을 설정합니다tooltip- (선택 사항) slider 핸들 위에 마우스를 올렸을 때 눈금 값이 포함된 안내 메시지를 활성화합니다. 기본값은 true입니다
서비스 속성 및 메서드
경고
기본 유형의 컨트롤에 대한 서비스 속성 및 메서드를 재정의하지 않는 것이 좋습니다. 재정의할 경우 기능이 손상될 수 있습니다.
$on- (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 객체는 다음 속성을 가집니다:$handler- (선택 사항) - Slider Form 컨트롤의change이벤트와 DataCollection의change이벤트가 발생할 때 동작을 처리할 수 있는 콜백 함수입니다. 다음 매 개변수와 함께 호출됩니다:$setValue- (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 Slider Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:object- 다음 속성을 가진 객체입니다:editor- Diagram Editor의 객체입니다control- 컴포넌트가 기반으로 하는 Slider Form 컨트롤의 객체입니다value- Diagram 항목의 값입니다
$layout- (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. Slider Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:object- 서비스 속성을 제외한 컨트롤의 구성입니다
예제
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
editbar: {
properties: {
$lineTitle: [
{
type: "slider",
key: "distance",
label: "Distance",
wrap: true,
min: 0,
max: 100,
step: 1,
tick: 5,
majorTick: 10,
tickTemplate: value => value
},
]
}
}
}
});
editor.parse([
{ "id": "shape_1", "type": "rectangle", "text": "shape" },
{ "id": "shape_2","type": "rectangle", "text": "shape", "x": 400 },
{ "id": "line", "type": "line", "from": "shape_1", "to": "shape_2" },
{ "type": "lineTitle", "parent": "line", "text": "Title", "distance": 50 }
]);