º ( 크롬 익스텐션 'Markdown viewer'를 사용하면 깔끔하게 확인 가능합니다, https://chromewebstore.google.com/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk )
Dialog 사용을 위해 아래 링크 및 스크립트를 head에 사용한다.
Dialog.css는 다이얼로그 기본 틀만 잡혀있다. 따라서 별도의 스타일 값을 잡아서 사용한다.
<link rel="stylesheet" href="yogo-dialog-1.0.0/dialog.css" />
<script src="yogo-dialog-1.0.0/dialog.js"></script>dialog(필수) 생성 후 고유 id를 삽입한다.
<dialog id="default-dialog" title="dialog title here">
<!-- sombody here -->
</dialog>window.load된 후에 사용.
//type
window.addEventListener("load", ()=> {
new YogoDialog(type : String, options: Object);
})
//기본 다이얼로그 생성
const defaultDialog = new YogoDialog("#default-dialog", {
options : {
modal : true,
style: {
width: 1000,
height: 400,
},
header : {
/*
24.04.26 - pks
title 값은 더이상 사용하지 않습니다. (dialog태그의 title로 대체)
이유 : dialog에 title 값이 있으면 내부의 모든 요소에 title의 대체 텍스트가 붙는다.
*/
// title : "타이틀",
closeIcon: "ico_x-01--light",
minimize: {
icon: "ico_minimize-01--light",
icons: {
mini: "ico_minimize-01--light",
maxi: "ico_maximize-01--light"
}
},
events: () => {
defaultDialog._close()
}
},
footer: [
{
title: "취소",
className: "ui-button size-20 outlined",
function: () => {
defaultDialog._close()
}
},
{
title: "확인",
className: "ui-button size-20 toned",
function: () => {
defaultDialog._close()
}
}
]
};
});
//다이얼로그 확인
defaultDialog._open();| NAME | TYPE | DESCRIPTION | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| modal | Boolean = false | 모달형태 노출 관련 옵션으로, true일 경우 화면 정 가운데 노출된다. (position : fixed) | ||||||||||||||||||||||||
| className | String = "class-name brabra-class add-class" | 다이얼로그에 클래스를 추가할 수 있다. (문자열이며, 띄어쓰기를 사용하여 구분) | ||||||||||||||||||||||||
| drag | Boolean = true | header의 ".yogo-dialog__header"영역을 잡아 이동할 수 있다. header 옵션과 doPosition() 메소드가 필수이며, modal과는 같이 사용할 수 없다. |
||||||||||||||||||||||||
| header | Object | 다이얼로그 헤더 영역으로 타입은 Object.
|
||||||||||||||||||||||||
| content | Object | dialog안에 content영역에 대한 선언을 할 수 있다. content옵션은 필수가 아니며, 선언하지 않을 경우, dialog내부 HTML이 content가 된다.
|
||||||||||||||||||||||||
| events | Object | 다이얼로그의 생성, 열기, 닫기 등의 동작에 함수를 선언할 수 있다.
|
||||||||||||||||||||||||
| style | Object | 다이얼로그의 넓이 및 높이 값을 선언
|
다이얼로그를 상태를 노출로 변경.
defaultDialog._open();다이얼로그를 상태를 비노출로 변경.
defaultDialog._close();스크롤시, .yogo-dialog__content영역의 스크롤 값을 알 수 있다.
defaultDialog.doScroll((wheel)=> {
console.log(wheel);
/*
wheel = {
distance_value: wheelEvent value,
wheelDirection: "up" || "down",
}
*/
});다이얼로그의 상대적 위치를 선언 할 수 있음. (Only modal : false)
| NAME | TYPE | DESCRIPTION | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| of | String = "#dialog-id" | 다이얼로그의 위치를 `of` 기준 설정 | |||||||||||||||||||||||||||
| at | Object | `of`에서 다이얼로그의 위치를 `at`으로 이동시킨다.
|
|||||||||||||||||||||||||||
| me | Object | `at`으로 이동한 다이얼로그의 상대적 위치를 선언한다.
|
dialog1.doPosition({
of: "#standardPosition",
at: {
horizontal: {
direction: "left",
value: 0
},
vertical: {
direction: "center",
value: 0
}
},
me: {
horizontal: {
direction: "left",
},
vertical: {
direction: "center",
}
}
})- alert 다이얼로그의 사용성 개편이 필요 (현재 dialog내부에 html을 수동 삽입이 강제됨, 자동으로 넣을 수 있도록 수정 필요) - 적용 완료
- doPosition값이 없을 경우, drag 옵션이 정상적으로 동작하지 않음, 수정이 필요. (right, bottom 값이 초기화 되지 않았기 떄문)
- 연관되어있는 옵션이 정상적으로 사용되지 않으면 throw error를 사용이 필요. - 진행중