Avatar
이미지를 업로드하기 위한 기본 컨트롤입니다.
사용법
{
type: "avatar",
key?: string, // 기본값은 "img"
wrap?: boolean, // 기본값은 false
target?: string,
hidden?: boolean, // 기본값은 false
disabled?: boolean, // 기본값은 false
readOnly?: boolean, // 기본값은 false
removeIcon?: boolean, // 기본값은 true
circle?: boolean, // 기본값은 false
icon?: string,
placeholder?: string,
preview?: string,
alt?: string,
size?: "small" | "medium" | "large" | number, // 기본값은 "medium"
css?: string,
width?: string | number | "content", // 기본값은 "content"
height?: string | number | "content", // 기본값은 "content"
padding?: string | number,
// `wrap:true`인 경우 Fieldset의 label 속성을 확인하세요
label?: string,
labelWidth?: string | number,
labelPosition?: "left" | "top", // 기본값은 "top"
accept?: string, // 기본값은 "image/*"
fieldName?: string, // 기본값은 "file"
autosend?: boolean, // 기본값은 false
params?: { [key: string]: any },
headerParams?: { [key: string]: any },
updateFromResponse?: boolean, // 기본값은 true
// 서비스 속성 및 메서드
$on?: { [eventName: string]: function },
$handler?: function,
$setValue?: function,
$layout?: function
설명
기본 속성
type- (필수) 컨트롤의 유형입니다."avatar"로 설정하세요key- (선택 사항) Diagram 항목 객체에서 지정/수정되는 속성의 이름입니다. 기본값은"img"입니다wrap- (선택 사항) 외부 래핑을 표시할 수 있습니다. 기본값은 false입니다target- (선택 사항) 파일 업로드를 처리할 서버 측 스크립트의 URL을 설정합니다. 이 속성은 컨트롤을 통해 서버로 이미지를 전송할 때 필수입니다
노트
hidden- (선택 사항) 컨트롤을 숨길지 여부를 정의합니다. 기본값은 false입니다disabled- (선택 사항) 컨트롤을 활성화(false)할지 비활성화(true)할지를 정의합니다. 기본값은 false입니다readOnly- (선택 사항) 컨트롤의 읽기 전용 모드를 설정합니다. 기본값은 false입니다removeIcon- (선택 사항) UI를 통해 컨트롤을 지울 수 있도록 합니다. 기본값은 true입니다circle- (선택 사항) 컨트롤을 둥근 모서리로 표시하는 모드를 설정합니다. 기본값은 false입니다icon- (선택 사항) 업로드된 이미지가 없을 때 아이콘의 CSS 클래스를 설정할 수 있습니다.preview속성과 함께 사용할 수 없습니다placeholder- (선택 사항) 업로드된 이미지가 없을 때 표시할 텍스트를 설정할 수 있습니다.preview속성과 함께 사용할 수 없습니다preview- (선택 사항) 미리보기 이미지의 절대 경로를 지정합니다. 이미지가 업로드되지 않은 경우 미리보기 이미지가 표시됩니다alt- (선택 사항) <img> 태그의 속성을 설정합니다. 이미지가 업로드되지 않은 경우 표시되는 대체 텍스트입니다size- (선택 사항) 컨트롤의 세 가지 기본 크기 중 하나("small"|"medium"|"large")를 설정하거나 px 단위로 사용자 지정 크기를 적용할 수 있습니다. 기본값은"medium"입니다css- (선택 사항) 컨트롤에 스타일 클래스를 추가합니다width- (선택 사항) 컨트롤의 너비입니다. 기본값은"content"입니다height- (선택 사항) 컨트롤의 높이입니다. 기본값은"content"입니다padding- (선택 사항) Avatar 컨트롤의 셀과 테두리 사이의 여백을 설정합니다label- (선택 사항) 컨트롤의 레이블을 지정합니다labelWidth- (선택 사항) 컨트롤의 레이블 너비를 설정합니다labelPosition- (선택 사항) 레이블의 위치("left"|"top")를 정의합니다. 기본값은"top"입니다accept- (선택 사항) 선택한 파일의 유형/확장자를 지정할 수 있습니다. 기본값은 "image/"*입니다. 자세히 보기fieldName- (선택 사항) 서버로 전송되는 폼 데이터에서 파일 필드 이름을 설정합니다. 기본값은"file"입니다autosend- (선택 사항) 추가된 파일의 자동 전송을 활성화/비활성화합니다. 기본값은 false입니다params- (선택 사항) XMLHttpRequest 전송을 위한 추가 매개변수를 추가합니다headerParams- (선택 사항) Request Headers에 대한 추가 매개변수를 제공합니다updateFromResponse- (선택 사항) 서버 응답의 데이터로 파일 속성을 업데이트합니다. 기본값은 true입니다
서비스 속성 및 메서드
경고
기본 유형의 컨트롤에 대해 서비스 속성 및 메서드를 재정의하지 않을 것을 강력히 권장합니다. 재정의할 경우 기능이 손상될 수 있습니다.
$on- (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 이 객체는 다음 속성을 가집니다:$handler- (선택 사항) - Avatar Form 컨트롤의change이벤트 및 DataCollection의change이벤트가 발생할 때의 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:$setValue- (선택 사항) - 컨트롤 초기화 시점 및 DataCollection에서 값이 변경될 때 Avatar Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:object- 다음 속성을 가진 객체입니다:editor- Diagram Editor의 객체control- 컴포넌트가 빌드된 Avatar Form 컨트롤의 객체value- Diagram 항목의 값
$layout- (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. Avatar Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:object- 서비스 속성을 제외한 컨트롤의 구성
예제
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
editbar: {
properties: {
"img-card": [
{
type: "avatar",
accept: "image/*",
fieldName: "file",
target: "https://docs.dhtmlx.com/suite/backend/upload",
params: {
"firstCustomParam": "customValue"
},
headerParams: {
"firstCustomParam": "customValue"
},
autosend: true
}
]
}
}
}
});