Getting Started

1. Pico UI를 사용하기 위해서는 필수 외부 라이브러리가 필요합니다.
2. Pico UI 라이브러리를 다운로드 받습니다.
3. 필수 라이브러리와 함께 pico-ui.css 와 pico-ui.js를 불러옵니다.
HTML
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="/to/path/pico-ui.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
	crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
	crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="/to/path/pico-ui.js"></script>
4. Pico UI를 실행시킵니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="./pico-ui.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="./pico-ui.js"></script>
</head>
<body>
    
</body>
<script>
	pico.desk.init({
	    apps:{
	        items:[
	            {
	                accessid:"page-a",
	                title:"Page A",
	                icon:{
	                    type:"material",
	                    class:"people_alt",
	                },
	                window:{
	                    url:"./a.html"
	                }
	            }
	        ]
	    },
	    dock:{
	        items:["page-a"]
	    }
	});
</script>
</html>

Init

Pico UI 기본 구성을 설정합니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="./pico-ui.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="./pico-ui.js"></script>
</head>
<body>
    
</body>
<script>
	pico.desk.init({
	    apps:{
	        items:[
	            {
	                accessid:"page-a",
	                title:"Page A",
	                icon:{
	                    type:"material",
	                    class:"people_alt",
	                },
	                window:{
	                    url:"./a.html"
	                }
	            }
	        ]
	    },
	    dock:{
	        items:["page-a"]
	    }
	});
</script>
</html>

Desk

Component를 제외한 Pico UI 구성시 사용합니다.

init

pico.desk.init(Object)

Pico UI를 실행하는 명령어입니다.

  • 1. items형태의 객체(Object)를 생성합니다.
  • 2. apps에 배열형태의 items를 넣습니다.
  • 3. apps를 실행시키기 위해 기본메뉴인 dock을 설정합니다.
  • 4. pico.desk.init(Object) 를 실행시킵니다.
Parameters
옵션 형식 필수 기본값 설명
language String 아니오 ko 언어를 설정합니다.
한국어:ko/영어:en/러시아어:ru/중국어:zh/일본어:ja
containment String 아니오 body pico-ui가 실행될 부모태그를 선택합니다.
theme String 아니오 default 테마를 설정합니다.
background String 아니오 null 배경화면의 경로를 지정합니다.
appshelp_outline Object 예 null 앱을 설정합니다.
windowhelp_outline Object 아니오 null 앱 클릭시 실행되는 창의 옵션을 설정합니다.
taskbarhelp_outline Object 아니오 null 상단 테스크바의 옵션을 설정합니다.
null일 경우 테스크바는 나타나지 않습니다.
shortcutshelp_outline Object 예 null 배경화면에 바로가기 아이콘을 추가합니다.
null일 경우 바로가기가 나타나지 않습니다.
dockhelp_outline Object 예 null 배경화면 하단에 dock을 설정합니다.
pico.desk.init()의 예제코드입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="./pico-ui.css" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="./pico-ui.js"></script>
</head>
<body>
    
</body>
<script>
	pico.desk.init({
	    apps:{
	        items:[
	            {
	                accessid:"page-a",
	                title:"Page A",
	                icon:{
	                    type:"material",
	                    class:"people_alt",
	                },
	                window:{
	                    url:"./a.html"
	                }
	            }
	        ]
	    },
	    dock:{
	        items:["page-a"]
	    }
	});
</script>
</html>

items

앱을 구성하는 최소단위의 객체(Object)입니다.
  • items는 하위옵션으로써 단독으로 사용할 수 없고,
  • 다른 상위 옵션인 apps, dock, shortcut, taskbar와 함께 사용됩니다.
Parameters
옵션 형식 필수 기본값 설명
accessid String 예 null 참조id입니다.
pico.desk.init()시 apps 옵션에 전달된 items 객체는 이 옵션을 활용할 수 있습니다.
shortcuts, dock등 앱을 필요로 하는 곳에서 이 옵션의 값을 사용합니다.
title String 예 null 앱의 이름입니다.
iconhelp_outline Object 예 null 앱의 아이콘을 설정합니다.
windowhelp_outline Object 예 null 앱 실행 창에 대한 정보입니다.
창의 크기, 실행 위치, 연결할 URL 등을 설정할 수 있습니다.
Events
이벤트명 인자 설명
click() function icon 클릭 시(taskbarhelp_outline에서만 사용가능합니다.)
items의 Parameter 옵션 상세 설명
  • items는 여러 설정에서 범용적으로 사용됩니다.
  • 따라서 items를 사용할 상위 객체(apps, dock, shortcut, taskbar)에 따라 사용법이 상의합니다.
  • 아래 표는 items를 저장할 상위 객체에 따라 옵션의 사용가능한 여부입니다.
Parameters
상위 옵션 accessid title icon window click()
apps o o o o x
dock o o o o x
shortcut o o o o x
taskbar x x o x o
items 객체의 사용 예제코드입니다.

아래 예제는 상위 객체가 apps인 경우 사용법입니다.

javascript
...

var appItems = [
    {
        accessid: "app-person",
        title: '계정',
        icon: {
            type: "material",
            class: "people_alt"
        },
        window: {
            buttonsColor: "#fd7e14",
            multi: true,
            width: 1024,
            height: 700,
            url: "/demo/account"
        }
    }, {
        accessid: "app-schedule",
        title: '일정',
        icon: {
            type: "material",
            class: "calendar_today"
        },
        window: {
            buttonsColor: "#dc3545",
            multi: true,
            resize: false,
            width: 1024,
            height: 700,
            url: "/demo/schedule"
        }
    }, {
        accessid: "app-gallery",
        title: '갤러리',
        icon: {
            type: "material",
            class: "amp_stories"
        },
        window: {
            buttonsColor: "#007bff",
            multi: true,
            resize: false,
            width: 1024,
            height: 700,
            url: "/demo/gallery"
        }
    }, {
        accessid: "app-board",
        title: '게시판',
        type: "link",
        icon: {
            type: "material",
            class: "title"
        },
        window: {
            buttonsColor: "#5400dc",
            multi: true,
            resize: false,
            width: 1024,
            height: 700,
            url: "/demo/board"
        }
    }
];

...
items는 다음과같은 아이콘으로 표현됩니다.

icon

items의 아이콘을 설정합니다.

https://material.io를 참고하여 class값을 부여합니다.

Parameters
옵션 형식 필수 기본값 설명
type String 예 null 아이콘의 타입을 설정합니다.

값으로 'material'사용을 권장합니다.
class String 예 null 'material' 의 아이콘 이름을 기재합니다.
icon 객체의 사용 예제코드입니다.
javascript

// <span class="material-icons">3rd_rotation</span> 형태를 icon으로 사용하는 방법

var myApp = {
	...
	icon:{
	    type:"material",
	    class:"3rd_rotation"
	}
	...
};

apps

Pico UI에서 사용되는 모든 앱을 관리합니다.
Parameters
옵션 형식 필수 기본값 설명
itemshelp_outline Object[] 예 null 앱을 추가합니다.
items 객체를 배열로 추가해야합니다.
apps 객체의 사용 예제코드입니다.
javascript
var myGallery = {
    accessid:"my-gallery",
    title:"갤러리",
    icon:{
        type:"material",
        class:"amp_stories"
    },
    window:{
        buttonsColor:"#fd7e14",
        multi:true,
        width:1024,
        height:700,
        url:"/demo/gallery"
    }
};

var myBoard = {
    accessid:"app-board",
    title:'게시판',
    icon:{
        type:"material",
        class:"title",
    },
    window:{
        buttonsColor:"#5400dc",
        multi:true,
        resize:false,
        width:1024,
        height:700,
        url:"/demo/board"
    }
};

var myApps = [
    myGallery,
    myBoard
];

pico.desk.init({
    apps:{
        items:myApps
    },
    dock:{
        enabled:true,
        items:["my-gallery","app-board"]
    },
});
예제코드 실행 결과입니다.

window

모든 창(app 더블클릭시 나타나는 창)의 기본값을 설정합니다.
  • 이 옵션은 items의 window 옵션보다 우선순위가 낮습니다.
Parameters
옵션 형식 필수 기본값 설명
multi boolean 아니오 false 하나의 앱을 여러개 실행시킬 수 있는지 설정합니다.
resize boolean 아니오 true 모든 창의 크기 조절 가능여부를 설정합니다.

* 최소/최대화는 영향을 받지않습니다.
minimize boolean 아니오 true 모든 창의 최소화 가능여부를 설정합니다.
maxmize boolean 아니오 true 모든 창의 최대화 가능여부를 설정합니다.
width int 아니오 800 모든 창의 기본 너비를 설정합니다.
height int 아니오 600 모든 창의 기본 높이를 설정합니다.
x int 아니오 0 모든 창의 실행시 기본 x좌표를 설정합니다.
y int 아니오 0 모든 창의 실행시 기본 x좌표를 설정합니다.
url String 예 null 창 내부에 나타낼 url을 설정합니다.
Events
이벤트명 인자 설명
openBefore() 없음 창 실행 전
openComplete() 없음 창 실행 끝난뒤
closeBefore() 없음 창 닫기 전
closeComplete() 없음 창 닫힌 후
moveStart() 없음 창 이동 시작시
moving() 없음 창 이동 중
moveStop() 없음 창 이동 후
resizeStart() 없음 창 정렬 시작시
resizing() 없음 창 정렬 중
resizeStop() 없음 창 정렬 끝난뒤
minimizeStart() 없음 창 최소화 시작시
minimizeStop() 없음 창 최소화 끝난뒤
maxmizeStart() 없음 창 최대화 시작시
maxmizeStop() 없음 창 최대화 끝난뒤
예제코드 실행 결과입니다.

taskbar

화면 상단에 시간과 간단한 앱을 나열할 수 있는 영역을 설정합니다.
Parameters
옵션 형식 필수 기본값 설명
enabled boolean 아니오 true 테스크바 사용여부
clock boolean 아니오 true 시계 사용여부
clock24h boolean 아니오 false 시간형식 (false: 오전/오후 12:00 | true: 24:00)
itemshelp_outline Object[] 아니오 null taskbar 우측에 작은 앱을 추가합니다.
taskbar 객체의 사용 예제코드입니다.
javascript
pico.desk.init({
	apps:{
		items:[{
			accessid:"page-a",
			title:"Page A",
			icon:{
				type:"material",
				class:"people_alt",
			},
			window:{
				url:"./a.html"
			}
		},
		{
			accessid:"page-b",
			title:"Page B",
			icon:{
				type:"material",
				class:"calendar_today",
			},
			window:{
				url:"./b.html"
			}
		}]
	},
	dock:{
		enabled:true,
		active:true,
		animate:true,
		items:["page-a","page-b"],
		position:"bottom"
	},
	shortcuts:{
		enabled:true,
		items:["name"]
	},
	taskbar:{
		items:[
			{
				icon:{
					type:"material",
					class:"notifications",
				},
				click:function(e){
					pico.toast({
						message:'메시지가 없습니다.',
						duplicate:false,
						position:"center-center",
						delay:2000,
						color:"warning",
						finish:function(){
							console.log("finish");
						},
					});
				}
			},
			{
				icon:{
					type:"material",
					class:"power_settings_new",
				},
				click:function(){
					pico.confirm({
						title:null,
						message:'로그아웃 하시겠습니까?',
						buttons:{
							align:"horizontal",
							yes:function(obj, event){
								console.log("YES");
								event.dismiss();
								location.href="/";
							},
							no:function(obj, event){
								console.log("NO");
							}
						}
					});
				}
			}
		],
		complete:function(ui){
			console.log(ui);
		}
	},
});
예제코드 실행 결과입니다.

shortcuts

items를 배경화면에 나열합니다.
Parameters
옵션 형식 필수 기본값 설명
enabled boolean 아니오 true 배경화면에 바로가기 앱 사용여부를 설정합니다.
itemshelp_outline String[] 예 null init()의 인자로 apps에 넣어준 items 객체의 accessid 값을 문자열 배열 형태로 적습니다.

dock

배경화면 하단에 앱아이콘을 설정합니다.
Parameters
옵션 형식 필수 기본값 설명
enabled boolean 아니오 true dock의 사용여부를 설정합니다.
active boolean 아니오 true dock의 사용여부를 설정합니다.
enabled과의 차이점 필요
position String 아니오 bottom 배경화면 기준으로 dock의 위치를 지정합니다.
(bottom: 하단)
animate boolean 아니오 false dock 아이콘에 마우스를 올리면 확대되는 효과의 사용여부를 설정합니다.
itemshelp_outline String[] 예 null init()의 인자로 apps에 넣어준 items 객체의 accessid 값을 문자열 배열 형태로 적습니다.
Events
이벤트명 인자 설명
complete() 없음 dock 생성 후
itemDragStart() 없음 dock의 앱 이동 전
itemDragging() 없음 dock의 앱 이동 중
itemDragStop() 없음 dock의 앱 이동 후
sortStart() 없음 창 이동 시작시
sorting() 없음 창 이동 중
sortStop() 없음 창 이동 후
예제코드 실행 결과입니다.

Component

경고창, 확인창, 토스트창, 팝업등을 설정합니다.

alert

pico.alert(Object)
  • 전달 인자인 Object의 구조에 대한 설명입니다.
Parameters
옵션 형식 필수 기본값 설명
title String 예 null alert의 제목입니다.
message String 예 null alert의 내용입니다.
duration int 아니오 250 alert이 나타나고 사라지는 애니메이션의 시간입니다.
값이 높을수록 천천히 나타나고 천천히 사라집니다.
scale String 아니오 default alert의 크기를 설정합니다.
small / normal / big
class String 아니오 null alert에 class를 추가합니다.
Events
이벤트명 인자 설명
close() 없음 alert이 닫히고 난 후
alert 사용 예제코드입니다.
javascript
pico.alert({
	message:'이것은 alert창입니다.',
	close:function(){
		console.log('alert창이 닫혔습니다.');
	}
});

confirm

pico.confirm(Object)
  • 전달 인자인 Object의 구조에 대한 설명입니다.
Parameters
옵션 형식 필수 기본값 설명
title String 예 null confirm의 제목입니다.
message String 예 null confirm의 내용입니다.
buttons Object 예 null confirm 하단의 버튼을 제어합니다.
객체 옵션은 아래에서 지정할 수 있습니다.
buttons:{
align String 아니오 horizontal 버튼의 위치를 설정합니다.
(horizontal:수직정렬 / vertical:수평정렬)
yes function(obj, event) 예 null 버튼에서 '예'를 클릭할 경우 실행할 callback 함수입니다.

* 반드시 파라미터 기재(obj, event)가 필요합니다.

* 반드시 confirm 종료 코드 event.dismiss()가 필요합니다.

no function(obj, event) 예 null 버튼에서 '아니오'를 클릭할 경우 실행할 callback 함수입니다.

* 반드시 파라미터 기재(obj, event)가 필요합니다.

}
duration int 아니오 250 confirm이 나타나고 사라지는 애니메이션의 시간입니다.
값이 높을수록 천천히 나타나고 천천히 사라집니다.
scale String 아니오 default confirm의 크기를 설정합니다.
small / normal / big
class String 아니오 null confirm에 class를 추가합니다.
confirm 사용 예제코드입니다.
javascript
pico.confirm({
	title:'안녕하세요',
	message:'이것은 확인창입니다.',
	buttons:{
		yes:function(obj, event){
			console.log("'예'를 클릭하셨습니다.");
			// '예' 클릭시 confirm창이 사라지기전에 실행될 코드
			event.dismiss();	// 창을 사라지게 합니다.
			// '예' 클릭시 confirm창이 사라지고난 후 실행될 코드
		},
		no:function(obj, event){
			console.log("'아니오'를 클릭하셨습니다.");
		}
	}
});

toast

pico.toast(Object)
  • 전달 인자인 Object의 구조에 대한 설명입니다.
Parameters
옵션 형식 필수 기본값 설명
message String 예 Toast toast의 내용입니다.
position String 아니오 center-center toast가 화면에 나타날 위치입니다.
사용가능한 값과 위치는 아래와 같습니다.
top-left
top-center
top-right
center-left
center-center
center-right
bottom-left
bottom-center
bottom-right
duration int 아니오 250 toast이 나타나고 사라지는 애니메이션의 시간입니다.
값이 높을수록 천천히 나타나고 천천히 사라집니다.
delay int 아니오 1000 toast의 지속시간입니다.
값이 높을수록 오랫동안 나타납니다.
color String 아니오 success toast의 색상을 설정합니다.
success: #00c851 / warning: #fb3 / info: #33b5e5 / error: #ff3547
또는 임의의 rgb값으로 설정이 가능합니다.
Events
이벤트명 인자 설명
finish() 없음 toast가 사라지고 난 후
toast 사용 예제코드입니다.
javascript
pico.toast({
	message:"Toast test.",
	duplicate:false,
	position:"center-center",
	delay:2000,
	color:"success",
	finish:function(){
		console.log("toast 사라짐");
	}
});

popup

pico.popup(Object)
  • 전달 인자인 Object의 구조에 대한 설명입니다.
Parameters
옵션 형식 필수 기본값 설명
title String 예 null popup의 제목입니다.
contents String 예 null popup의 내용입니다.
width int 아니오 300 popup의 폭입니다.
height int 아니오 400 popup의 높이입니다.
x int 아니오 -1 popup의 시작 x 좌표입니다.
y int 아니오 -1 popup의 시작 y 좌표입니다.
duration int 아니오 250 popup이 나타나고 사라지는 애니메이션의 시간입니다.
값이 높을수록 천천히 나타나고 천천히 사라집니다.
draggable boolean 아니오 false popup의 제목 영역을 마우스로 드래그하여 움직일 수 있는지 설정합니다.
closeButton boolean 아니오 false popup을 닫을 수 있는 X 버튼을 제목 우측 영역에 나타낼지 설정합니다.
scroll boolean 아니오 false popup의 contents영역을 스크롤할 수 있는지 설정합니다.
footerHTML String 아니오 null popup의 하단 영역에 나타낼 html을 String 형태로 추가합니다.
containment String 아니오 html popup를 자식으로 추가될 html영역을 선택합니다.
html태그의 선택자 ('.example' 또는 '#example')로 추가할 수 있습니다.
비워둘 경우 <html> 가장 마지막에 추가됩니다.
class String 아니오 null confirm에 class를 추가합니다.
Events
이벤트명 인자 설명
open(obj, event) function popup이 열리고 난 후

* 반드시 파라미터 기재(obj, event)가 필요합니다.

* 반드시 confirm 종료 코드 event.dismiss()가 필요합니다.

close(obj, event) function popup이 닫히고 난 후

* 반드시 파라미터 기재(obj, event)가 필요합니다.

popup 사용 예제코드입니다.
javascript
pico.popup({
	title:'event',
	contents:'<a href="https://www.pico-ui.com" target="_blank"><img style="width: 100%; display: inline-block;" src="/assets/img/popup-sample.png"></a>',
	width:300,
	height:416,
	class:"popup-sample",
	draggable:true,
	closeButton:true,
	bodyClick:false,
	containment:null,
	footerHTML:'<button class="pico-ui-button btn-never">오늘 하루 안보기</button><button class="pico-ui-button btn-close">닫기</button>',
	open:function(obj, event){
		var btnNever = $(obj).find(".btn-never").eq(0); 
		var btnClose = $(obj).find(".btn-close").eq(0); 
		
		btnNever.on("click",function(e){
			e.preventDefault();
		});
		
		btnClose.on("click",function(e){
			e.preventDefault();
			event.dismiss();
		});
	},
	close:function(obj, event){

	}
});

Locale

언어 설정 추가하기
  • Pico UI는 기본적으로 ko/en/ja/zh 를 제공하고 있습니다.
  • pico-ui-locale.js를 수정하여 지원언어를 추가할 수 있습니다.
javascript
const $pico_locale={
	// Korean
	"ko":{
		"about":"Pico UI 대해서",
		"apps":"모든앱",
		"language":"언어",
		"display":"화면설정",
		"fullscreen":"전체화면",
		"fullscreen_off":"전체화면 해제",
		"alert":"알림",
		"confirm":"확인",
		"close":"닫기",
		"no":"아니오",
		"yes":"예",
		"new_window":"새 창",
		"add_to_dock":"하단 메뉴바에 추가",
		"remove_from_dock":"하단 메뉴바에서 제거",
		"all_minimize":"전체 최소화",
		"all_show":"전체 보이기",
		"all_close":"전체 닫기",
		"all_sort":"전체 정렬",
		"group_sort":"{0} 일괄 정렬",
		"group_minimize":"{0} 일괄 최소화",
		"group_close":"{0} 일괄 닫기",
		"icon_sort":"아이콘 정렬",
		"question_close_window":"창을 닫으시겠습니까?",
		"question_all_close_window":"모든 창을 닫으시겠습니까?",
		"question_reload":"화면이 새로고침 됩니다.<br/>계속하시겠습니까?",
		"message_multi_not_support":"멀티창을 지원하지 않습니다.",
		"message_dock_duplicate_item":"하단 메뉴바에 동일한 항목이 존재합니다.",
		"message_added":"추가되었습니다."
	},
	// New Locale
	"example":{ //pico.desk.init에서 사용될 language 이름입니다.
		"about":"About Pico UI",
		"apps":"...",
		... 생략
	},
};
언어 설정 추가하기
javascript
pico.desk.init({
	language:"example",
	....생략
});