React Snackbar

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

Ignite UI for React 스낵바 예시

이 샘플은 IgrSnackbar 구성 요소를 만드는 방법을 보여줍니다.

EXAMPLE

TSX

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarOverview() {
    const snackbarRef = useRef<IgrSnackbar>(null);

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

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar ref={snackbarRef}>
                <span>Snackbar Message</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarOverview />);
tsxコピー

Edit in: Codesandbox

용법

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

npm install igniteui-react
cmd

그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgrSnackbar 합니다.

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

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

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

<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();
      }
  }
tsx

예

표시 시간

스낵바 구성요소가 표시되는 기간을 구성하려면 displayTime 속성을 사용하세요. 기본적으로 4000밀리초로 설정되어 있습니다.

EXAMPLE

TSX

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarDisplayTime() {
    const snackbarRef = useRef<IgrSnackbar>(null);

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

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar ref={snackbarRef} displayTime={6000}>
                <span>Snackbar with different display time</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarDisplayTime />);
tsxコピー

Edit in: Codesandbox

액션 텍스트

기본적으로 스낵바 구성요소는 displayTime에 지정된 기간이 지나면 자동으로 숨겨집니다. keepOpen 속성을 사용하여 이 동작을 변경할 수 있습니다. 이렇게 하면 스낵바가 계속 표시됩니다. 스낵바 actionText 사용하면 구성 요소 내부에 작업 버튼을 표시할 수 있습니다.

EXAMPLE

TSX

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarActionText() {
    const snackbarRef = useRef<IgrSnackbar>(null);

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

    const onSnackbarActionClicked = () => {
        snackbarRef.current?.hide();
    };

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar
                ref={snackbarRef}
                keepOpen={true}
                actionText="Close"
                onAction={onSnackbarActionClicked}
            >
                <span>Snackbar with enabled keep-open option</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarActionText />);
tsxコピー

Edit in: Codesandbox

스타일링

구성 요소는 IgrSnackbar 스타일을 완전히 제어할 수 있도록 여러 CSS 부분을 노출합니다.

이름	설명
base	스낵바 구성 요소의 기본 래퍼입니다.
message	스낵바 메시지입니다.
action	기본 스낵바 작업 버튼입니다.
action-container	액션이 있는 영역입니다.

igc-snackbar::part(base) {
  background: var(--ig-primary-500);
  border-color: var(--ig-primary-800);
  color: white;
}
css

EXAMPLE

TSX

CSS

import React, { useRef } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './SnackbarStyling.css';
import { IgrButton, IgrSnackbar } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

export default function SnackbarStyling() {
    const snackbarRef = useRef<IgrSnackbar>(null);

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

    return (
        <div className="container sample">
            <IgrButton variant="contained" onClick={onShowButtonClicked}>
                <span>Show Snackbar</span>
            </IgrButton>

            <IgrSnackbar ref={snackbarRef}>
                <span>Styled Snackbar</span>
            </IgrSnackbar>
        </div>
    );
}

// rendering above function to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SnackbarStyling />);
tsxコピー

igc-snackbar::part(base) {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
}cssコピー

Edit in: Codesandbox

API 참조

• actionText
• displayTime
• keepOpen
• show
• IgrSnackbar
• Styling & Themes

추가 리소스

• Ignite UI for React 포럼
• Ignite UI for React GitHub