benxu.AppPlatform.BlazorUI 2.0.0

benxu.AppPlatform.BlazorUI

Blazor UI 元件庫 - 提供可重複使用的 UI 元件。

特色

• AppButton - 多樣式按鈕（Primary, Secondary, Success, Danger）
• AppModal - 模態對話框
• InAppNotification - 應用內通知（Success, Error, Warning, Info）
• LoadingSpinner - 載入動畫（Small, Medium, Large）

安裝

dotnet add package benxu.AppPlatform.BlazorUI

使用方式

1. 註冊服務

在 MauiProgram.cs 中：

builder.UseAppPlatform(options =>
{
    options.UseBlazorUI();
});

2. 加入全域元件

在 App.razor 或主要 Layout 中加入：

<InAppNotification />

3. AppButton 使用範例

@using benxu.AppPlatform.BlazorUI.Components

<AppButton Text="點擊我" OnClick="HandleClick" />

<AppButton Text="主要按鈕" ButtonClass="primary" />
<AppButton Text="次要按鈕" ButtonClass="secondary" />
<AppButton Text="成功按鈕" ButtonClass="success" />
<AppButton Text="危險按鈕" ButtonClass="danger" />

<AppButton Text="載入中..." IsLoading="true" />
<AppButton Text="已停用" Disabled="true" />

@code {
    private async Task HandleClick()
    {
        Console.WriteLine("按鈕被點擊！");
    }
}

4. AppModal 使用範例

@using benxu.AppPlatform.BlazorUI.Components

<AppButton Text="開啟對話框" OnClick="() => isModalOpen = true" />

<AppModal IsOpen="isModalOpen"
          Title="確認對話框"
          OnClose="() => isModalOpen = false">
    <p>這是模態對話框的內容。</p>
    <p>您確定要執行此操作嗎？</p>

    <Footer>
        <AppButton Text="取消"
                   ButtonClass="secondary"
                   OnClick="() => isModalOpen = false" />
        <AppButton Text="確認"
                   ButtonClass="primary"
                   OnClick="HandleConfirm" />
    </Footer>
</AppModal>

@code {
    private bool isModalOpen = false;

    private async Task HandleConfirm()
    {
        Console.WriteLine("已確認！");
        isModalOpen = false;
    }
}

5. InAppNotification 使用範例

@inject INotificationService NotificationService

<AppButton Text="成功通知" OnClick="ShowSuccess" />
<AppButton Text="錯誤通知" OnClick="ShowError" ButtonClass="danger" />
<AppButton Text="警告通知" OnClick="ShowWarning" ButtonClass="warning" />
<AppButton Text="資訊通知" OnClick="ShowInfo" ButtonClass="secondary" />

@code {
    private void ShowSuccess()
    {
        NotificationService.ShowSuccess("操作成功完成！");
    }

    private void ShowError()
    {
        NotificationService.ShowError("發生錯誤，請稍後再試。", 5000);
    }

    private void ShowWarning()
    {
        NotificationService.ShowWarning("請注意此操作可能有風險。");
    }

    private void ShowInfo()
    {
        NotificationService.ShowInfo("這是一則提示訊息。");
    }
}

6. LoadingSpinner 使用範例

@using benxu.AppPlatform.BlazorUI.Components

<LoadingSpinner Size="small" />
<LoadingSpinner Size="medium" Message="載入中..." />
<LoadingSpinner Size="large" Color="#28a745" Message="處理資料中，請稍候..." />

@code {
    private bool isLoading = true;

    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(3000);
        isLoading = false;
    }
}

元件 API

AppButton

AppModal

INotificationService

LoadingSpinner

自訂樣式

所有元件都支援 CSS 變數自訂：

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
}

依賴項目

• Microsoft.AspNetCore.Components.Web (8.0.20)
• benxu.AppPlatform.Core

授權

MIT License - Copyright (c) 2025 benxu