UI.Shared 1.2.0

🧩 UI.Shared Entegrasyonu (Blazor Projesi için)

Bu doküman, UI.Shared Razor Class Library (RCL) bileşenlerinin ana Blazor projesine nasıl entegre edileceğini açıklar.

📁 1. CSS Dosyalarının Dahil Edilmesi

UI.Shared kütüphanesindeki paylaşılan stilleri projenize dahil etmek için, MainLayout.razor veya _Host.cshtml dosyasına aşağıdaki bağlantıları ekleyin:

<link href="_content/UI.Shared/css/spinner.css" rel="stylesheet" /> <link href="_content/UI.Shared/css/toast.css" rel="stylesheet" /> <link href="_content/UI.Shared/css/modal.css" rel="stylesheet" /> <link href="_content/UI.Shared/css/all.min.css" rel="stylesheet" /> <link href="_content/UI.Shared/css/sidebar_admin.css" rel="stylesheet" />

💡 Not: Bu dosyalar, RCL projesi derlendiğinde _content/UI.Shared dizini altına otomatik olarak kopyalanır. Kendi tema projeniz varsa (UI.AdminLTE, UI.MatBlazor, UI.Blazorise vb.), aynı yapı orada da korunmalıdır.

🧱 2. Layout Yapısı

MainLayout.razor dosyasına aşağıdaki yapıyı ekleyin:

@inherits LayoutComponentBase

<div class="main-layout"> <SidebarTech /> @* Sol menü bileşeni *@

<div class="main-content">
    @Body           @* Sayfa içeriği burada görüntülenir *@
</div>

</div>

📘 SidebarTech bileşeni, UI.Shared.Components altında tanımlanmış bir navigasyon (sidebar) yapısıdır. Menü elemanları SidebarService üzerinden dinamik olarak yönetilebilir.

⚙️ 3. Servislerin Kullanıma Alınması

Projede global olarak kullanılacak servisleri Program.cs içerisinde kaydedin:

builder.Services.AddUIServices(builder.HostEnvironment.BaseAddress);

Bu metot, aşağıdaki servisleri DI (Dependency Injection) konteynerine ekler:

Servis Adı Açıklama SpinnerService Global yükleniyor göstergesi (loading spinner) ToastService Bildirim (toast message) yönetimi ModalService Popup/modal pencereleri kontrolü SidebarService Menü ve navigasyon kontrolü 🧭 4. Router ve Global Bileşenler

App.razor dosyasında aşağıdaki yapı önerilir:

<Router AppAssembly="@typeof(App).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> <FocusOnNavigate RouteData="@routeData" Selector="h1" /> </Found> <NotFound> <PageTitle>Not found</PageTitle> <LayoutView Layout="@typeof(MainLayout)"> <p role="alert">Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router>

<SpinnerTech /> @* Sayfa yüklenirken spinner gösterimi @ <ToastTech /> @ Bildirim sistemi @ <ModalTech /> @ Modal yönetimi *@

✅ Bu bileşenlerin global olarak eklenmesi, her sayfada tekrar tanımlama ihtiyacını ortadan kaldırır.

🧠 5. Görsel Akış (Basitleştirilmiş Şema) ┌───────────────────────────────┐ │ MainLayout │ │ ┌────────────┐ ┌────────────┐ │ │ │ SidebarTech│ │ MainBody │ │ │ └────────────┘ └────────────┘ │ └───────────────────────────────┘ │ ▼ ┌───────────────┐ │ App.razor │ │ ├ Router │ │ ├ SpinnerTech │ │ ├ ToastTech │ │ └ ModalTech │ └───────────────┘

🧩 6. Örnek Klasör Yapısı UI.Shared/ ├── Components/ │ ├── SidebarTech.razor │ ├── SpinnerTech.razor │ ├── ToastTech.razor │ └── ModalTech.razor ├── Services/ │ ├── SpinnerServices/ │ ├── ToastServices/ │ ├── ModalServices/ │ └── SidebarServices/ ├── css/ │ ├── spinner.css │ ├── toast.css │ ├── modal.css │ ├── all.min.css │ └── sidebar_admin.css └── UI.Shared.csproj

💬 7. Özet Alan Görev Layout Sayfa düzeni ve sidebar yapısı Router Sayfa yönlendirme ve layout yönetimi Global Bileşenler Spinner, Toast, Modal yönetimi Servisler UI durum yönetimi (state management) CSS Tema ve görsel stil dosyaları