syidaxdesign system
홈 가격 내 정보
ComponentsOverlays

Modeless

배경 화면을 계속 사용할 수 있는 독립적인 작업 창입니다.

<sy-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>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-modeless>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse하위 메뉴가 펼쳐진 상태입니다.
| '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.
booleanfalse제목을 드래그해 창을 이동합니다.
booleanfalse창 경계에서 크기를 조절합니다.
booleanfalse닫기 버튼을 표시합니다.
booleanfalse최소화 버튼을 표시합니다.
booleanfalse최대화 버튼을 표시합니다.
booleanfalse창 경계 스타일을 사용합니다.
booleanfalse최대화된 상태입니다.
booleanfalse최소화된 상태입니다.
number | undefinedundefined화면 위에서의 위치(px)입니다.
number | undefinedundefined화면 왼쪽에서의 위치(px)입니다.
number200창 너비(px)입니다.
number150창 높이(px)입니다.
unknownDEFAULT_MIN_WIDTH창 최소 너비(px)입니다.
unknownDEFAULT_MIN_HEIGHT창 최소 높이(px)입니다.

Events

EventDetailDescription
CustomEvent<{ id: string }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ id: string; status: string }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<ModelessPositionChangedDetail>이벤트의 detail에서 결과를 확인하세요.

Methods

MethodReturnsDescription
Promise<void>하위 메뉴를 펼칩니다.
Promise<void>항목을 닫습니다.
Promise<void>창을 최대화합니다.
Promise<void>창을 원래 크기로 복원합니다.
Promise<void>창을 최소화합니다.

Slots

SlotDescription
title 영역에 표시할 내용입니다.
header 영역에 표시할 내용입니다.
content 영역에 표시할 내용입니다.

<sy-modeless-group>

Methods

MethodReturnsDescription
Promise<void>고유 id로 새 Modeless 창을 만듭니다.
Promise<void>지정한 id 창의 내용을 변경합니다.
Promise<void>지정한 id 창의 제목을 변경합니다.
Promise<void>지정한 id 창의 위치·크기 등 설정을 변경합니다.
Promise<void>열린 패널을 닫습니다.
Promise<void>모든 패널을 접습니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기