React Snackbar

    Ignite UI for React Snackbar 구성 요소는 화면 아래쪽에 간단한 메시지를 표시하여 작업에 대한 피드백을 제공하는 데 사용됩니다.

    Ignite UI for React Snackbar Example

    This sample demonstrates how to create IgrSnackbar component.

    Usage

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

    npm install igniteui-react

    You will then need to import the IgrSnackbar and its necessary CSS, like so:

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

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

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

    <IgrButton variant="contained" onClick={onShowButtonClicked}>
    <span>Show Snackbar</span>
</IgrButton>
<IgrSnackbar ref={snackbarRef}>
    <span>Snackbar Message</span>
</IgrSnackbar>

const snackbarRef = useRef<IgrSnackbar>(null);

const onShowButtonClicked = () => {
      if (snackbarRef) {
          snackbarRef.current.show();
      }
  }

    Examples

    Display Time

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

    Action Text

    By default, the snackbar component is hidden automatically after a period specified by the displayTime. You can use keepOpen property to change this behavior. In this way, the snackbar will remain visible. Using the snackbar actionText you can display an action button inside the component.

    Styling

    The IgrSnackbar component exposes several CSS parts to give you full control over its styling:

    이름 설명
    base 스낵바 구성 요소의 기본 래퍼입니다.
    message 스낵바 메시지입니다.
    action 기본 스낵바 작업 버튼입니다.
    action-container 액션이 있는 영역입니다. 
    igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}

    API References

    Additional Resources