Blazor 스낵바

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

Ignite UI for Blazor Snackbar Example

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbSnackbarModule)
    );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

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

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

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

// in Program.cs file

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

​IgbSnackbar 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

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

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

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

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Examples

Display Time

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCheckboxModule),
                typeof(IgbButtonModule),
                typeof(IgbSnackbarModule)
  );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample vertical">
    <div class="button-container">
        <IgbCheckbox Change=OnChange2>Increase Display Time</IgbCheckbox>
        <IgbButton onclick="snackbar1.show()" >Show Snackbar</IgbButton>
        <IgbSnackbar @ref="ToggleSnackbarRef" id="snackbar1" KeepOpen="false"> @SnackbarDisplayText </IgbSnackbar>
    </div>
</div>

@code {
    
    public string SnackbarDisplayText { get; set; } = "Hello there!";

    private IgbSnackbar snackbar1;
    public IgbSnackbar ToggleSnackbarRef
    {
        get { return snackbar1; }
        set {
            snackbar1 = value; StateHasChanged();
            snackbar1.DisplayTime = 1000;
        }
    }

    private void OnChange2(IgbCheckboxChangeEventArgs e)
    {
        if(snackbar1.DisplayTime != 5000)
        {
            snackbar1.DisplayTime = 5000;
            this.SnackbarDisplayText = "Displaying for 5 seconds...";
        }
        else
        {
            snackbar1.DisplayTime = 1000;
            this.SnackbarDisplayText = "Hello there!";
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Action Text

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCheckboxModule),
                typeof(IgbButtonModule),
                typeof(IgbSnackbarModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container sample vertical">
    <div class="button-container">
        <IgbButton onclick="snackbar1.show()">Show Snackbar</IgbButton>
        <IgbButton onclick="snackbar1.hide()">Hide Snackbar</IgbButton>

        <IgbSnackbar @ref="ToggleSnackbarRef" id="snackbar1" KeepOpen="true" ActionText="Close" Action=OnActionClick> @SnackbarDisplayText </IgbSnackbar>
    </div>
</div>

@code {
    
    public string SnackbarDisplayText { get; set; } = "Hello there!";

    private IgbSnackbar snackbar1;
    public IgbSnackbar ToggleSnackbarRef
    {
        get { return snackbar1; }
        set {
            snackbar1 = value;
            StateHasChanged();
        }
    }

    private void OnActionClick(IgbVoidEventArgs e)
    {
        this.ToggleSnackbarRef.Hide();
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Styling

The IgbSnackbar 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;
}
css

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbButtonModule),
                typeof(IgbSnackbarModule)
    );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
igc-snackbar::part(base) {
background: #0d6efd;
border-color: #0d6efd;
color: white;
}
</style>
<div class="container vertical">
    <IgbButton onclick="snackbar.show()">Show Snackbar</IgbButton>
    <IgbSnackbar id="snackbar"> Snackbar Message </IgbSnackbar>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

API References

• ActionText
• DisplayTime
• KeepOpen
• Show
• IgbSnackbar
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브