Blazor でトースター表示する(sotsera.blazor.toaster)

1. はじめに

Blazorでトースターメッセージを表示する sotsera.blazor.toaster を使ってみました。

2. サンプル実装

ではサクッと。

2.1. プロジェクト作成

プロジェクトを作成します。
プロジェクト名は use-sotsera-toaster としました。

dotnet new blazor -o use-sotsera-toaster

use-sotsera-toasterディレクトリに移動し、「Sotsera.Blazor.Toaster」パッケージを追加します。
2019.5.16 現在の最新バージョン 0.9.0-preview-3 を入れました。

cd use-sotsera-toaster
dotnet add package Sotsera.Blazor.Toaster --version 0.9.0-preview-3

www.nuget.org

2.2. サービス登録

StartupクラスのConfigureServices()でサービス登録を行います。

# Startup.cs #

using Microsoft.AspNetCore.Components.Builder;
using Microsoft.Extensions.DependencyInjection;

using Sotsera.Blazor.Toaster.Core.Models;

namespace use_sotsera_toaster
{
  public class Startup
  {
    public void ConfigureServices(IServiceCollection services)
    {
      services.AddToaster(config =>
      {
        config.PositionClass = Defaults.Classes.Position.TopRight;
        config.MaximumOpacity = 80;
        config.VisibleStateDuration = 10000;
        config.HideTransitionDuration = 3000;
        config.NewestOnTop = false;
        config.ShowCloseIcon = true;
        config.ShowProgressBar = false;
        config.PreventDuplicates = true;
      });
    }

    public void Configure(IComponentsApplicationBuilder app)
    {
      app.AddComponent<App>("app");
    }
  }
}

【using Sotsera.Blazor.Toaster.Core.Models;】

config設定で「Defaults.Classes.Position.TopRight」を使用するために、このusingを追加しています。
AddToaster()メソッドはSotsera.Blazor.Toasterアセンブリ内でMicrosoft.Extensions.DependencyInjection名前空間に実装されています。

【services.AddToaster()】

トーストサービスを追加します。
config設定を行うことでトースト表示の振る舞いをカスタマイズできます。
サンプルで設定したconfigは以下の通りです。

PositionClass
トーストを表示する画面上の位置を設定します。サンプルでは右上を設定。
MaximumOpacity
初期表示時のトーストの透過率を設定します。
100%が透過なしです。サンプルではトースト初期表示時に80%の透過率で表示されます。

f:id:daigo-knowlbo:20190516022202p:plain
※よく見ると右上の About 文字とかが透過してるのが分かります。
※トーストは消える際に徐々に薄くなります。

VisibleStateDuration
トーストが表示されてから消え始めるまでの時間をmsで指定します。
HideTransitionDuration
トーストが表示からVisibleStateDuration(ms)経過した後から、徐々に薄くなって完全に消えるまでの時間をmsで指定します。
NewestOnTop
複数のトーストが同時に表示される場合、新しいトーストを上に表示する場合は true 、下に表示する場合は false を指定します。
trueの場合：

falseの場合：
ShowCloseIcon
トースト右上の閉じるアイコンの表示/非表示設定を行います。
ShowProgressBar
トーストが消えるまでの時間を示すプログレスバーの表示/非表示設定を行います。
PreventDuplicates
同一のメッセージがすでにトースト表示されている場合に、別のトーストとして追加表示するかどうかを設定します。
falseの場合：

trueの場合：(同じメッセージのToaster.Info()呼び出しが何回行われてもトーストは1つに制御される)
f:id:daigo-knowlbo:20190516023249p:plain

2.3. ページでトースト表示を実装

Index.razorページにボタンを用意し、ボタンがクリックされたらトーストが表示されるようにします。
トーストには、スタイルの異なる Info / Success / Warning / Error が用意されているので、それぞれを表示するボタンを用意することとします。

# Pages/Index.razor #

@page "/"
@using Sotsera.Blazor.Toaster
@inject Sotsera.Blazor.Toaster.IToaster Toaster
<ToastContainer />

<input type="button" value="Show info" onclick="@ShowInfo" />
<input type="button" value="Show info" onclick="@ShowSuccess" />
<input type="button" value="Show info" onclick="@ShowWarning" />
<input type="button" value="Show info" onclick="@ShowError" />

@functions {
  private void ShowInfo() {
    Toaster.Info("info message");
  }

  private void ShowSuccess() {
    Toaster.Success("Success message");
  }

  private void ShowWarning() {
    Toaster.Warning("Warning message");
  }
  
  private void ShowError() {
    Toaster.Error("Error message");
  }
}