Web Components 스낵바

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

    Ignite UI for Web Components Snackbar Example

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

    Usage

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

    npm install igniteui-webcomponents

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

defineComponents(IgcSnackbarComponent);

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

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

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

    Examples

    Display Time

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

    Action Text

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

    Styling

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

    이름 설명
    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