Tech.UI.Shared 1.3.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 önerilen yapı:

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

---

Bu sürüm **NuGet’te README olarak göründüğünde düzgün, formatlı ve okunabilir** olacaktır.  
İstersen ben bunu ayrıca **badge ve örnek GIF/ekran görüntüsü ekleyerek daha profesyonel bir NuGet README** hâline de getirebilirim.  

Bunu yapmamı ister misin?