Toast

작업 결과를 잠시 표시하고 자동으로 닫는 알림입니다.

<sy-toast>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

상태표시 시간(ms)위치

닫기 허용새 알림 먼저

코드 보기

HTML

<sy-toast duration="3000" id="sample"></sy-toast>
<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.createToast("success", {
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000,
      "position": "bottomRight"
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

사용 가이드

저장 완료처럼 작업을 방해하지 않는 짧은 피드백에 사용합니다. 반드시 확인받아야 하는 내용에는 Modal이 알맞습니다.

알림 생성
createToast() 또는 상태별 메서드로 알림을 만듭니다. 본문의 지정 위치에 차례로 쌓입니다.
표시 시간 정하기
duration은 밀리초이며 0이면 자동으로 닫히지 않습니다. 오래 남는 알림에는 closable을 제공하세요.
작업에 맞춰 닫기
앱의 흐름에서 필요하면 closeToast()로 알림을 종료하세요.

예제

작업 완료

성공 알림은 기본 3초 후 닫힙니다.

코드 보기

HTML

<sy-toast id="sample"></sy-toast>
<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.createToast("success", {
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

오류 알림

실패 이유와 다음 행동을 전달합니다.

코드 보기

HTML

<sy-toast id="sample"></sy-toast>
<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.createToast("error", {
      "headerSlot": "저장 실패",
      "bodySlot": "연결 상태를 확인한 뒤 다시 시도하세요.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

사용자가 닫기

duration을 0으로 지정해 닫기 전까지 유지합니다.

코드 보기

HTML

<sy-toast id="sample"></sy-toast>
<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.createToast("info", {
      "headerSlot": "안내",
      "bodySlot": "닫기 버튼으로 알림을 닫을 수 있습니다.",
      "closable": true,
      "duration": 0
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

여러 알림

버튼을 여러 번 누르면 새 알림이 위쪽에 쌓입니다.

코드 보기

HTML

<sy-toast latesttop id="sample"></sy-toast>
<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.createToast("neutral", {
      "headerSlot": "새 알림",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 8000,
      "position": "topRight"
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

상태별 메서드

createSuccessToast처럼 상태별 메서드로도 같은 알림을 만들 수 있습니다.

코드 보기

HTML

<sy-toast id="sample"></sy-toast>
<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>
</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.createSuccessToast({
      "headerSlot": "저장 완료",
      "bodySlot": "프로젝트 변경 사항을 저장했습니다.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.createWarningToast({
      "headerSlot": "주의",
      "bodySlot": "변경 사항을 확인하세요.",
      "closable": true,
      "duration": 3000
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

알림의 슬롯과 개별 제어

직접 만든 Toast Item에 아이콘·제목·본문·푸터를 넣습니다. show()로 표시하고 close()로 제거합니다. 다시 표시할 때는 새 인스턴스를 만듭니다.

코드 보기

HTML

<sy-button id="new-toast">알림 표시</sy-button>
<sy-button id="close-toast">현재 알림 닫기</sy-button>

<script type="module">
  await (root => {
    let current;
    root.querySelector('#new-toast').addEventListener('click', async () => {
      await current?.close();
      current = document.createElement('sy-toast-item');
      current.duration = 0;
      current.closable = true;
      current.innerHTML = _msg("m_bb89f25d8ea4");
      root.append(current);
      await current.show();
    });
    root.querySelector('#close-toast').addEventListener('click', () => current?.close());
  })(document);
</script>

기능별 예제

18개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Item Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.