React Toast 개요

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

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

    React Toast Example

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

    Ignite UI for React 토스트 알림을 사용하는 방법

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

    npm install igniteui-react

    그 후 ReactIgrToast와 필요한 CSS를 이렇게 불러와야 합니다:

    import { IgrToast } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    Ignite UI for React에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    The simplest way to display the toast component is to use its show method and call it on a button click.

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Toast</span>
</IgrButton>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onShowButtonClicked = () => {
        toastRef.current?.show();
    };

    예

    속성

    Use the displayTime property to configure how long the toast component is visible. By default, it's set to 4000 milliseconds.

    By default, the toast component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the toast will remain visible.

    <div>
    <IgrButton variant="contained" onClick={onToggleButtonClicked}>
        <span>Toggle Toast</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onKeepOpenButtonClicked}>
        <span>Toggle keepOpen Property</span>
    </IgrButton>
    <IgrButton variant="contained" onClick={onDisplayTimeButtonClicked}>
        <span>Set DisplayTime to 8000</span>
    </IgrButton>
</div>

<IgrToast ref={toastRef}>
    <span>Toast Message</span>
</IgrToast>

const toastRef = useRef<IgrToast>(null);

const onToggleButtonClicked = () => {
    toastRef.current?.toggle();
};

const onKeepOpenButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.keepOpen = !toastRef.current.keepOpen;
    }
};

const onDisplayTimeButtonClicked = () => {
    if (toastRef.current) {
        toastRef.current.displayTime = 8000;
    }
};

    스타일링

    You can style the React IgrToast notifications directly using its tag selector:

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

    API 참조

    추가 리소스