Modeless
배경 화면을 계속 사용할 수 있는 독립적인 작업 창입니다.
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
resizable
minimizable
maximizable
animation="none"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>사용 가이드
#메모·도구 창처럼 주 화면과 함께 계속 사용할 보조 창에 사용합니다. 필수 확인을 받아야 한다면 Modal이 알맞습니다.
- 제목과 내용
title·content슬롯으로 창의 목적을 분명하게 보여주세요.- 위치와 크기
draggable·resizable로 이동·크기 조절을 허용하고 최소화·최대화 후setRestore()로 복원할 수 있습니다.- 여러 창 관리
sy-modeless-group의create()로 창을 만들고updateTitle()·updateContent()·close()로 관리합니다. 창마다 고유한id를 지정하세요.
예제
#독립 창
창이 열려 있어도 배경의 동작을 사용할 수 있습니다.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>이동과 크기 조절
제목을 드래그하고 창의 경계를 조절합니다.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
resizable
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>최소화·최대화·복원
버튼으로 창 상태를 전환합니다.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
minimizable
maximizable
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">열기</sy-button>
<sy-button id="action-1" size="small">최소화</sy-button>
<sy-button id="action-2" size="small">최대화</sy-button>
<sy-button id="action-3" size="small">복원</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget1 = document.querySelector("#sample");
document.querySelector('#action-1').addEventListener('click', async () => {
const result = await actionTarget1.setMinimum();
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget2 = document.querySelector("#sample");
document.querySelector('#action-2').addEventListener('click', async () => {
const result = await actionTarget2.setMaximum();
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget3 = document.querySelector("#sample");
document.querySelector('#action-3').addEventListener('click', async () => {
const result = await actionTarget3.setRestore();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>여러 창 관리
서로 다른 id로 만든 창을 그룹에서 관리합니다.
코드 보기
HTML
<sy-modeless-group id="sample"></sy-modeless-group>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">첫 창</sy-button>
<sy-button id="action-1" size="small">두 번째 창</sy-button>
<sy-button id="action-2" size="small">제목 변경</sy-button>
<sy-button id="action-3" size="small">모두 닫기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.create("note-a", "작업 메모",
"\u003cp>첫 번째 메모입니다.\u003c/p>", {
"width": 250,
"height": 180,
"top": 130,
"left": 12,
"closable": true
});
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget1 = document.querySelector("#sample");
document.querySelector('#action-1').addEventListener('click', async () => {
const result = await actionTarget1.create("note-b", "참고 자료",
"\u003cp>두 번째 창입니다.\u003c/p>", {
"width": 250,
"height": 180,
"top": 180,
"left": 55,
"closable": true
});
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget2 = document.querySelector("#sample");
document.querySelector('#action-2').addEventListener('click', async () => {
const result = await actionTarget2.updateTitle("note-a", "수정한 메모");
document.querySelector('#demo-result').textContent = describeResult(result);
});
const actionTarget3 = document.querySelector("#sample");
document.querySelector('#action-3').addEventListener('click', async () => {
const result = await actionTarget3.closeAll();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>이벤트와 전달 값
컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
resizable
minimizable
maximizable
animation="none"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
for (const name of ["closed", "statusChanged", "positionChanged"]) {
document.addEventListener(name, event => {
document.querySelector('#demo-events').textContent =
`${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
});
}
</script>최소 크기와 전환 속도
minWidth와 minHeight보다 작아지지 않게 크기를 제한합니다. 창을 열고 모서리를 드래그해 최소 크기를 확인하세요.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
resizable
minimizable
maximizable
animation="fade"
minwidth="240"
minheight="180"
animation-speed="fast"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const component1 = document.querySelector("#sample");
Object.assign(component1, {
"minWidth": 240,
"minHeight": 180,
"animation": "fade",
"animationSpeed": "fast",
"resizable": true
});
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>제목 옆의 보조 정보
header 슬롯은 제목 오른쪽의 보조 영역입니다. open 프로퍼티로 처음부터 창을 표시하고 필요하면 maximum·minimum이나 대응 메서드로 창 상태를 바꾸세요.
코드 보기
HTML
<sy-modeless
closable
draggable="true"
width="280"
height="220"
top="80"
left="12"
resizable
minimizable
maximizable
animation="none"
open
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div><span slot="header">저장됨</span>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const component1 = document.querySelector("#sample");
Object.assign(component1, {
"open": true,
"maximum": false,
"minimum": false
});
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>위치와 크기가 고정된 창
이동과 크기 조절이 비활성화된 창을 엽니다.
코드 보기
HTML
<sy-modeless
closable
width="280"
height="220"
top="80"
left="12"
minimizable
maximizable
animation="none"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const component1 = document.querySelector("#sample");
Object.assign(component1, {
"isDraggable": false,
"resizable": false
});
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>기능별 예제
#32개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.
일치하는 기능이 없습니다.
사용 예제 · Group Overview
선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.
코드 보기
HTML
예제를 불러오고 있습니다.사용 예제 · Overview
선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Closable
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Edge
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Height
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Draggable
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Left
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Maximizable
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Maximum
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Min Height
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Min Width
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Minimizable
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Minimum
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Open
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Resizable
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Top
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.속성 · Width
설정에 따라 표시와 동작이 어떻게 달라지는지 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / Close
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / CloseAll
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / Create
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / UpdateContent
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / UpdateOption
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · Group Methods / UpdateTitle
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · SetClose
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · SetMaximum
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · SetMinimum
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · SetOpen
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.메서드 · SetRestore
예제 안의 버튼으로 메서드를 호출하고 실제 결과를 확인하세요.
코드 보기
HTML
예제를 불러오고 있습니다.이벤트 · Closed
컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.
코드 보기
HTML
예제를 불러오고 있습니다.이벤트 · PositionChanged
컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.
코드 보기
HTML
예제를 불러오고 있습니다.이벤트 · StatusChanged
컴포넌트를 조작하면 아래 실행 화면에 이벤트 이름과 전달 값이 표시됩니다.
코드 보기
HTML
예제를 불러오고 있습니다.사용 예제 · 위치와 크기가 고정된 창
이동과 크기 조절이 비활성화된 창을 엽니다.
코드 보기
HTML
<sy-modeless
closable
width="280"
height="220"
top="80"
left="12"
minimizable
maximizable
animation="none"
id="sample"
><span slot="title">작업 메모</span>
<div slot="content">
<p>다른 화면을 사용하면서 이 창을 유지할 수 있습니다.</p>
<sy-input placeholder="메모를 입력하세요" aria-label="작업 메모"></sy-input>
</div>
</sy-modeless>
<div class="demo-actions"
style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
<sy-button id="action-0" size="small">작업 창 열기</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>
<script type="module">
const describeResult = value => JSON.stringify(value, (_key, item) => {
if (item instanceof File) return {
name: item.name,
size: item.size,
type: item.type
};
if (item instanceof Element) return `<${item.localName}>`;
return item;
}) ?? '완료';
const component1 = document.querySelector("#sample");
Object.assign(component1, {
"isDraggable": false,
"resizable": false
});
const actionTarget0 = document.querySelector("#sample");
document.querySelector('#action-0').addEventListener('click', async () => {
const result = await actionTarget0.setOpen();
document.querySelector('#demo-result').textContent = describeResult(result);
});
</script>API reference
#이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.
<sy-modeless>
Properties
| Attribute / Property | Type | Default | Description |
|---|---|---|---|
boolean | false | 하위 메뉴가 펼쳐진 상태입니다. | |
| 'none'
| 'fade' | 'fade-scale' | 'zoom' | 'pop'
| 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right'
| 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right'
| 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right'
| 'flip-x' | 'flip-y' | 'bounce' | 'spin' | 'none' | Enter/exit animation type. `none` (default) toggles instantly. | |
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow' | 'fast' | Animation playback speed token. Maps to `--transition-*` global tokens. | |
boolean | false | 제목을 드래그해 창을 이동합니다. | |
boolean | false | 창 경계에서 크기를 조절합니다. | |
boolean | false | 닫기 버튼을 표시합니다. | |
boolean | false | 최소화 버튼을 표시합니다. | |
boolean | false | 최대화 버튼을 표시합니다. | |
boolean | false | 창 경계 스타일을 사용합니다. | |
boolean | false | 최대화된 상태입니다. | |
boolean | false | 최소화된 상태입니다. | |
number | undefined | undefined | 화면 위에서의 위치(px)입니다. | |
number | undefined | undefined | 화면 왼쪽에서의 위치(px)입니다. | |
number | 200 | 창 너비(px)입니다. | |
number | 150 | 창 높이(px)입니다. | |
unknown | DEFAULT_MIN_WIDTH | 창 최소 너비(px)입니다. | |
unknown | DEFAULT_MIN_HEIGHT | 창 최소 높이(px)입니다. |
Events
| Event | Detail | Description |
|---|---|---|
CustomEvent<{ id: string }> | 이벤트의 detail에서 결과를 확인하세요. | |
CustomEvent<{ id: string; status: string }> | 이벤트의 detail에서 결과를 확인하세요. | |
CustomEvent<ModelessPositionChangedDetail> | 이벤트의 detail에서 결과를 확인하세요. |
Methods
| Method | Returns | Description |
|---|---|---|
Promise<void> | 하위 메뉴를 펼칩니다. | |
Promise<void> | 항목을 닫습니다. | |
Promise<void> | 창을 최대화합니다. | |
Promise<void> | 창을 원래 크기로 복원합니다. | |
Promise<void> | 창을 최소화합니다. |
Slots
| Slot | Description |
|---|---|
| title 영역에 표시할 내용입니다. | |
| header 영역에 표시할 내용입니다. | |
| content 영역에 표시할 내용입니다. |
<sy-modeless-group>
Methods
| Method | Returns | Description |
|---|---|---|
Promise<void> | 고유 id로 새 Modeless 창을 만듭니다. | |
Promise<void> | 지정한 id 창의 내용을 변경합니다. | |
Promise<void> | 지정한 id 창의 제목을 변경합니다. | |
Promise<void> | 지정한 id 창의 위치·크기 등 설정을 변경합니다. | |
Promise<void> | 열린 패널을 닫습니다. | |
Promise<void> | 모든 패널을 접습니다. |
Slots
| Slot | Description |
|---|---|
| 컴포넌트의 본문 또는 자식 항목입니다. |