Web Components 토스트 개요

Web Components 토스트는 메시지 내용을 표시하고 최종 사용자에게 변경된 레코드의 상태를 알리는 데 사용되는 매우 가볍고 작은 팝업 구성 요소입니다. 화면의 하단이나 다른 지정된 영역에 Web Components 토스트 알림을 쉽게 배치하고 표시할 수 있습니다. 또는 간단하고 쉬운 방법으로 해제할 수도 있습니다.

Web Components 토스트 구성 요소는 주로 시스템 메시징, 푸시 알림, 경고 메시지 및 정보에 사용됩니다. 사용자가 해제할 수 없습니다. 이 컨트롤에는 애니메이션 효과, 토스트 구성 요소가 표시되는 시간을 구성하는 표시 시간 속성, 스타일링 등과 같은 다양한 기능이 있습니다.

Web Components Toast Example

아래의 간단한 Ignite UI for Web Components Toast 예제를 살펴보세요. 버튼을 클릭하면 애니메이션 알림 메시지가 팝업됩니다.

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastOverview {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Toast Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
      <igc-toast id="toast">Toast Message</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

How To Use Ignite UI for Web Components Toast Notification

먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

npm install igniteui-webcomponents
cmd

import { defineComponents, IgcToastComponent } from 'igniteui-webcomponents';

defineComponents(IgcToastComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

토스트 구성 요소를 표시하는 가장 간단한 방법은 show 메서드를 사용하고 버튼 클릭 시 호출하는 것입니다.

<igc-button onclick="toast.show()" variant="contained">Show Toast</igc-button>
<igc-toast id="toast">Toast Message</igc-toast>
html

Examples

Properties

displayTime 속성을 사용하여 토스트 구성 요소가 표시되는 기간을 구성합니다. 기본적으로 4000밀리초로 설정되어 있습니다.

기본적으로 토스트 구성 요소는 displayTime에 지정된 기간이 지나면 자동으로 숨겨집니다. keepOpen 속성을 사용하여 이 동작을 변경할 수 있습니다. 이런 식으로 토스트가 계속 보입니다.

<igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
<igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
<igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>

<igc-toast id="toast">Toast Message</igc-toast>
html

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ButtonOverviewStyle.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastProperties {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastProperties();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Toast Properties</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="button-container">
        <igc-button onclick="toast.toggle()" variant="contained">Toggle Toast</igc-button>
        <igc-button onclick="toast.keepOpen = !toast.keepOpen" variant="contained">Toggle keepOpen property</igc-button>
        <igc-button onclick="toast.displayTime = 8000" variant="contained">Set DisplayTime to 8000</igc-button>
      </div>
      <igc-toast id="toast">Toast Message</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>
</html>
html

.button-container {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

태그 선택기를 사용하여 Web Components IgcToastComponent 알림의 스타일을 직접 지정할 수 있습니다.

igc-toast {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}
css

import { defineComponents, IgcToastComponent, IgcButtonComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ToastStyling.css';

defineComponents(IgcToastComponent, IgcButtonComponent);
export class ToastStyling {
    constructor() {
        const toast = document.querySelector('igc-toast') as IgcToastComponent;
    }
}

new ToastStyling();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Styled Toast</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-button onclick="toast.show()" variant="contained">Show Styled Toast</igc-button>
      <igc-toast id="toast">Styled Toast</igc-toast>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

igc-toast {
    background: #011627;
    color: #ECAA53;
    outline-color: #ECAA53;
}css