Blazor Bootstrap 組件庫 Toast 輕量彈窗組件介紹

2022 年 4 月 17 日
筆記
Blazor, Blazor組件, BootstrapBlazor

輕量級 Toast 彈窗

基礎用法: 用戶操作時，右下角給予適當的提示信息

<ToastBox class="d-block" Options="@Options1" />

@code{
    Options1 = new ToastOption { Title = "保存數據", IsAutoHide = false, Content = "保存數據成功，4 秒後自動關閉" };
}

Toast 手動關閉: 不會自動關閉，需要人工點擊關閉按鈕

<Button Icon="fa fa-exclamation-triangle" OnClick="@OnNotAutoHideClick" Text="成功通知"></Button>

@code{
    private async Task OnNotAutoHideClick()
    {
        Toast.SetPlacement(Placement.BottomEnd);
        await ToastService.Show(new ToastOption()
        {
            Category = ToastCategory.Warning,
            IsAutoHide = false,
            Title = "消息通知",
            Content = "我不會自動關閉哦，請點擊右上角關閉按鈕"
        });
    }
}

特別注意

本組件使用注入服務的形式提供功能，使用時用戶體驗效果非常舒適，隨時隨地的調用

注入服務提供以下幾種快捷調用方法

Success()
Error()
Information()
Warning()

示例如下：

ToastService?.Success("保存成功", "保存數據成功，4 秒後自動關閉");

或

private void OnInfoClick()
{
    ToastService.Show(new ToastOption()
    {
        // 通知類別
        Category = ToastCategory.Information,

        // 通知框 Title 值
        Title = "消息通知",

        // 通知正文內容
        Content = "系統增加新組件啦，4 秒後自動關閉"
    });
}

屬性

參數	說明	類型	可選值	默認值
Category	彈出框類型	ToastCategory	Success/Information/Error/Warning	Success
Cotent	彈窗內容	string	—
Delay	自動隱藏時間間隔	int	—	4000
IsAutoHide	是否自動隱藏	boolean		true
IsHtml	內容中是否包含 Html 代碼	boolean		false
Placement	位置	Placement	Auto / Top / Left / Bottom / Right	Auto
Title	彈窗標題	string	—