Web Components 스낵바

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

    Ignite UI for Web Components Snackbar Example

    This sample demonstrates how to create IgcSnackbarComponent component.

    Usage

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

    npm install igniteui-webcomponents

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

defineComponents(IgcSnackbarComponent);

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

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

    <igc-button onclick="snackbar.show()" variant="contained">Show Snackbar</igc-button>
<igc-snackbar id="snackbar">Snackbar Message</igc-snackbar>

    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 IgcSnackbarComponent 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