UI.Shared 1.0.0

UI.Shared - Blazor UI Servisleri

UI.Shared paketi, Blazor WASM projeleri için paylaşımlı UI servisleri içerir: Modal, Spinner, Toast, Sidebar ve HTTP Service. Bu paket, projeye kolay entegrasyon sağlar ve tüm servisler NuGet paketi üzerinden kullanılabilir.

1️⃣ Program.cs – Servisleri ekleme

Her servis kullanılmadan önce Program.cs içinde paket servislerini ekleyin:

using UI.Shared;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// UI.Shared servislerini ekler (Modal, Spinner, Toast, Sidebar, HTTP)
builder.Services.AddUIServices();

await builder.Build().RunAsync();
AddUIServices() tüm servisleri scoped olarak ekler.
HTTP servis kullanıyorsanız SpinnerHttpHandler da HttpClient ile zincirlenir.

2️⃣ _Imports.razor
Razor componentlerini kullanmak için _Imports.razor dosyasına aşağıyı ekleyin:

razor
Kodu kopyala
@using UI.Shared.Components
@using UI.Shared.Services
Böylece <ModalHost />, <SpinnerHost />, <ToastHost />, <Sidebar /> gibi componentleri sayfalarda doğrudan kullanabilirsiniz.

3️⃣ Layout ve CSS / JS ekleme
RCL paketi içinde bulunan CSS ve JS dosyalarını projenize ekleyin:

MainLayout.razor veya App.razor:

razor
Kodu kopyala

<link href="_content/UI.Shared/css/ui.shared.css" rel="stylesheet" />


<script src="_content/UI.Shared/js/modal.js"></script>
<script src="_content/UI.Shared/js/sidebar.js"></script>
<script src="_content/UI.Shared/js/spinner.js"></script>
<script src="_content/UI.Shared/js/toast.js"></script>

<div class="main-layout">
    <Sidebar /> 
    <div class="main-content">
        @Body
    </div>
</div>


<ModalHost />
<SpinnerHost />
<ToastHost />
_content/UI.Shared/... yolu NuGet paketinin RCL içeriğini gösterir.

4️⃣ Servisler ve Kullanımları
4.1 ModalService
Modal pencereleri açmak için kullanılır.

Sayfa örneği:

razor
Kodu kopyala
@inject ModalService ModalService

<button @onclick="OpenModal">Modal Aç</button>

@code {
    private void OpenModal()
    {
        ModalService.Show<ExampleModal>("Başlık", new Dictionary<string, object>
        {
            { "Parameter1", "Değer" }
        });
    }
}
<ExampleModal /> RCL içinde tanımlı bir Razor component.

Parametreler dictionary ile gönderilebilir.

4.2 SpinnerService
Sayfa veya HTTP istekleri sırasında yükleme animasyonu gösterir.

Sayfa örneği:

razor
Kodu kopyala
@inject SpinnerService SpinnerService

<button @onclick="ShowSpinner">Göster</button>

@code {
    private void ShowSpinner()
    {
        SpinnerService.Show();
        Task.Delay(2000).ContinueWith(_ => SpinnerService.Hide());
    }
}
Spinner otomatik olarak Modal veya HTTP istekleriyle de tetiklenebilir.

4.3 ToastService
Bilgilendirme mesajları (başarılı, hata, uyarı) göstermek için kullanılır.

Sayfa örneği:

razor
Kodu kopyala
@inject ToastService ToastService

<button @onclick="ShowToast">Toast Göster</button>

@code {
    private void ShowToast()
    {
        ToastService.Show("İşlem başarılı!", ToastLevel.Success);
    }
}
Toast seviyeleri: Success, Error, Info, Warning.

4.4 SidebarService
Sidebar davranışını kontrol eder (açma/kapama, genişleme).

MainLayout örneği:

razor
Kodu kopyala
@inject SidebarService SidebarService

<Sidebar />

<button @onclick="() => SidebarService.Toggle()">Sidebar Aç/Kapat</button>
Hover veya click ile açılmasını JS + CSS tarafından kontrol edebilirsiniz.
Sidebar componenti RCL’den gelir ve kendi animasyonlarına sahiptir.

4.5 HttpCustomService
HTTP istekleri için Spinner ve token yönetimi sağlar.

Kullanım örneği:

csharp
Kodu kopyala
@inject IHttpCustomService HttpService

@code {
    private async Task GetData()
    {
        var result = await HttpService.HttpClientAsync<MyData>(
            HttpClientMethod.Get,
            "api/data",
            new HttpOptions { queryString = "page=1" }
        );
    }
}
Spinner otomatik olarak HTTP istekleri sırasında görünür.
Token refresh ve yetki kontrolü serviste hazırdır.

5️⃣ Özet Dosya Yapısı
rust
Kodu kopyala
MyBlazorApp/
│
├─ Program.cs           -> builder.Services.AddUIServices();
├─ _Imports.razor       -> @using UI.Shared.Components
├─ MainLayout.razor     -> CSS ve JS importları + <ModalHost/>, <ToastHost/> vb.
├─ Pages/
│  ├─ Index.razor       -> Modal, Toast, Spinner kullanım örnekleri