Blazor 스낵바
Ignite UI for Blazor 화면 하단에 간단한 메시지를 표시하여 작업에 대한 피드백을 제공하는 데 사용됩니다.
Ignite UI for Blazor Snackbar Example
이 샘플은 IgbSnackbar
구성 요소를 만드는 방법을 보여줍니다.
Usage
IgbSnackbar
사용하기 전에 다음과 같이 등록해야 합니다.
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule));
IgbSnackbar
구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 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;
}