Blazor 스낵바

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

    Ignite UI for Blazor Snackbar Example

    이 샘플은 컴포넌트를 만드는IgbSnackbar 방법을 보여줍니다.

    Usage

    사용하기IgbSnackbar 전에 다음과 같이 등록해야 합니다:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));

    스타일링을 컴포넌트에 적용하려면 추가 CSS 파일을 연결해야 합니다IgbSnackbar. 다음 내용은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 포함되어야 합니다:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

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

    스낵바 구성 요소를 가장 간단하게 표시하는 방법은 메서드Show를 사용해 버튼 클릭으로 호출하는 것입니다.

    <div class="container vertical">
    <IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
    <IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
</div>

    Examples

    Display Time

    이 속성을 사용DisplayTime 해 스낵바 구성 요소가 얼마나 오래 보이는지 설정하세요. 기본값은 4000밀리초로 설정되어 있습니다.

    Action Text

    기본적으로 스낵바 구성 요소는 지정된DisplayTime 기간 후에 자동으로 숨겨집니다. 이 동작을 변경하기 위해 속성을 사용할KeepOpen 수 있습니다. 이렇게 하면 스낵바가 계속 보이게 됩니다. 스낵바ActionText를 사용하면 컴포넌트 내부에 액션 버튼을 표시할 수 있습니다.

    Styling

    이 컴포넌트는IgbSnackbar 스타일링을 완전히 제어할 수 있도록 여러 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