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

AlexChow發表於2022-04-17
Blazorboot元件AST

輕量級 Toast 彈窗

DEMO https://www.blazor.zone/toasts

基礎用法: 使用者操作時，右下角給予適當的提示資訊

<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
—

Blazor Bootstrap 元件庫文件

https://www.blazor.zone

寫在最後

　　希望大佬們看到這篇文章，能給專案點個star支援下，感謝各位！

star流程：

1、訪問點選專案連結：BootstrapBlazor

　　https://gitee.com/LongbowEnterprise/BootstrapBlazor

2、點選star，如下圖，即可完成star，關注專案不迷路：
　　
　　

另外還有兩個GVP專案，大佬們方便的話也點下star唄，非常感謝：

　　BootstrapAdmin 專案地址：

　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 專案地址：

　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）歡迎加群討論

　　 BA & Blazor ①（795206915）　　　　　　　 BA & Blazor ②（675147445）

相關文章