Yeditepe.Theme.Admin 1.0.1

.NET 10.0

dotnet add package Yeditepe.Theme.Admin --version 1.0.1

NuGet\Install-Package Yeditepe.Theme.Admin -Version 1.0.1

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="Yeditepe.Theme.Admin" Version="1.0.1" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

<PackageVersion Include="Yeditepe.Theme.Admin" Version="1.0.1" />
                    

                            Directory.Packages.props

<PackageReference Include="Yeditepe.Theme.Admin" />
                    

                            Project file

For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.

paket add Yeditepe.Theme.Admin --version 1.0.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: Yeditepe.Theme.Admin, 1.0.1"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

#:package Yeditepe.Theme.Admin@1.0.1

#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.

#addin nuget:?package=Yeditepe.Theme.Admin&version=1.0.1
                    

                            Install as a Cake Addin

#tool nuget:?package=Yeditepe.Theme.Admin&version=1.0.1
                    

                            Install as a Cake Tool

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

Yeditepe Theme

Modern, kapsamlı ve kullanımı kolay Blazor UI Component Kütüphanesi.

📦 Paketler

Paket	Açıklama	NuGet
Yeditepe.Theme.Core	Temel UI componentleri (Button, Card, Modal, Form vb.)
Yeditepe.Theme.Admin	Admin panel componentleri (Layout, Sidebar, DataTable vb.)

🚀 Hızlı Başlangıç

1. Paket Kurulumu

# Core paketi (zorunlu)
dotnet add package Yeditepe.Theme.Core

# Admin paketi (opsiyonel - admin panel için)
dotnet add package Yeditepe.Theme.Admin

2. Servis Kaydı

Program.cs dosyasına ekleyin:

using Yeditepe.Theme.Core.Extensions;
using Yeditepe.Theme.Admin.Extensions; // Admin paketi kullanıyorsanız

var builder = WebApplication.CreateBuilder(args);

// Yeditepe Theme Core servisleri
builder.Services.AddYeditepeThemeCore();

// Admin paketi kullanıyorsanız
builder.Services.AddYeditepeThemeAdmin();

var app = builder.Build();

3. CSS ve JavaScript Referansları

App.razor veya _Host.cshtml dosyasına ekleyin:

<head>
    
    <link href="_content/Yeditepe.Theme.Core/css/yts-theme.css" rel="stylesheet" />
    
    
    <link href="_content/Yeditepe.Theme.Admin/css/yts-admin.css" rel="stylesheet" />
    
    
    <link href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" rel="stylesheet" />
</head>

<body>
    
    
    
    <script src="_content/Yeditepe.Theme.Core/js/yts-theme.js"></script>
</body>

4. _Imports.razor

_Imports.razor dosyasına ekleyin:

@using Yeditepe.Theme.Core.Components.Primitives
@using Yeditepe.Theme.Core.Components.Forms
@using Yeditepe.Theme.Core.Components.Layout
@using Yeditepe.Theme.Core.Services
@using Yeditepe.Theme.Core.Abstractions

@* Admin paketi kullanıyorsanız *@
@using Yeditepe.Theme.Admin.Components
@using Yeditepe.Theme.Admin.Components.Layout

5. Layout Yapılandırması

MainLayout.razor veya ana layout dosyanızda:

@inherits LayoutComponentBase

<YtsProvider>
    <YtsLayout>
        @Body
    </YtsLayout>
</YtsProvider>

Admin Layout için:

@inherits LayoutComponentBase

<YtsProvider>
    <YtAdminLayout Title="Admin Panel" 
                   LogoUrl="/img/logo.png"
                   MenuItems="_menuItems">
        @Body
    </YtAdminLayout>
</YtsProvider>

@code {
    private List<AdminMenuItem> _menuItems = new()
    {
        new AdminMenuItem { Title = "Dashboard", Url = "/", Icon = "ti ti-dashboard" },
        new AdminMenuItem { Title = "Users", Url = "/users", Icon = "ti ti-users" },
        // ...
    };
}

🎨 Tema Yapılandırması

Varsayılan Tema

builder.Services.AddYeditepeThemeCore();

Özel Tema Ayarları

builder.Services.AddYeditepeThemeCore(options =>
{
    options.DefaultTheme = "default";
    options.DefaultDarkMode = false;
    options.Themes = new List<string> { "default", "custom" };
});

YTS Options (Layout Ayarları)

builder.Services.AddYeditepeThemeCore(yts =>
{
    yts.DefaultTheme = YtsTheme.Light;        // Light, Dark, System
    yts.SidebarCollapsed = false;
    yts.SidebarMini = false;
    yts.NavbarFixed = true;
    yts.FooterFixed = false;
});

Runtime'da Tema Değiştirme

@inject IYtsThemeService ThemeService

<YtButton OnClick="ToggleDarkMode">Tema Değiştir</YtButton>

@code {
    private async Task ToggleDarkMode()
    {
        await ThemeService.ToggleThemeAsync();
    }
}

📚 Component Listesi

Primitives (Temel Componentler)

Component	Açıklama
`YtButton`	Buton (8 renk, 5 varyant, 5 boyut, ikonlar, loading state)
`YtAlert`	Uyarı kutusu (7 renk, 4 varyant, dismissible, ikonlar)
`YtBadge`	Etiket/rozet (8 renk, 3 varyant, 3 boyut, shapes)
`YtCard`	Kart (renkler, varyantlar, görsel, collapsible)
`YtModal`	Modal dialog (5 boyut, centered, backdrop options)
`YtTabs`	Sekme navigasyonu (4 varyant, vertical, icons)
`YtAccordion`	Akordiyon (always open, flush, header colors)
`YtDropdown`	Açılır menü (4 yön, 3 hizalama)
`YtPagination`	Sayfalama (renkler, boyutlar, varyantlar)
`YtProgress`	İlerleme çubuğu (renkler, boyutlar, striped, animated)
`YtSpinner`	Yükleme göstergesi (border/grow, renkler, boyutlar)
`YtTooltip`	İpucu (4 pozisyon)
`YtPopover`	Açılır bilgi kutusu (4 pozisyon)
`YtAvatar`	Kullanıcı avatarı (boyutlar, shapes, status, badge)
`YtChip`	Etiket/chip (renkler, varyantlar, closable)
`YtCarousel`	Slayt gösterisi (controls, indicators, autoplay)
`YtTimeline`	Zaman çizelgesi
`YtTreeview`	Ağaç görünümü
`YtOffcanvas`	Yan panel (4 pozisyon)
`YtDivider`	Ayırıcı çizgi
`YtBreadcrumb`	Sayfa yolu navigasyonu
`YtListGroup`	Liste grubu
`YtCollapse`	Açılır/kapanır içerik
`YtRating`	Yıldız derecelendirme
`YtToast`	Bildirim mesajı

Form Componentleri

Component	Açıklama
`YtInput<TValue>`	Metin girişi (tüm HTML5 tipleri, varyantlar, validation)
`YtSelect<TValue>`	Seçim kutusu (single/multiple, floating label)
`YtCheckbox`	Onay kutusu (renkler, boyutlar)
`YtSwitch`	Anahtar (renkler, boyutlar)
`YtRadio<TValue>`	Radyo butonu
`YtTextarea`	Çok satırlı metin (auto-resize, character count)
`YtDatePicker`	Tarih seçici
`YtTimePicker`	Saat seçici
`YtColorPicker`	Renk seçici
`YtSlider`	Kaydırıcı
`YtFileUpload`	Dosya yükleme
`YtAutocomplete<TValue>`	Otomatik tamamlama
`YtInputGroup`	Giriş grubu (prefix/suffix)
`YtFormGroup`	Form grubu (label, help text, validation)
`YtPassword`	Şifre girişi (göster/gizle, güç göstergesi)

Layout Componentleri

Component	Açıklama
`YtsProvider`	Tema sağlayıcı (zorunlu wrapper)
`YtsLayout`	Ana layout
`YtsSidebar`	Yan menü
`YtsNavbar`	Üst navigasyon
`YtsFooter`	Alt bilgi

Admin Componentleri (Admin Paketi)

Component	Açıklama
`YtAdminLayout`	Tam admin layout
`YtDataTable<TItem>`	Veri tablosu
`YtStatCard`	İstatistik kartı
`YtWidgetCard`	Widget kartı

💡 Kullanım Örnekleri

Button

@* Temel Kullanım *@
<YtButton>Click Me</YtButton>

@* Renkler *@
<YtButton Color="YtButton.ButtonColor.Primary">Primary</YtButton>
<YtButton Color="YtButton.ButtonColor.Success">Success</YtButton>
<YtButton Color="YtButton.ButtonColor.Danger">Danger</YtButton>

@* Varyantlar *@
<YtButton Variant="YtButton.ButtonVariant.Outline">Outline</YtButton>
<YtButton Variant="YtButton.ButtonVariant.Label">Label (Soft)</YtButton>
<YtButton Variant="YtButton.ButtonVariant.Text">Text</YtButton>
<YtButton Variant="YtButton.ButtonVariant.Gradient">Gradient</YtButton>

@* Boyutlar *@
<YtButton Size="YtButton.ButtonSize.Small">Small</YtButton>
<YtButton Size="YtButton.ButtonSize.Large">Large</YtButton>

@* İkonlar *@
<YtButton Icon="check">Onayla</YtButton>
<YtButton Icon="trash" IconOnly="true" />

@* States *@
<YtButton IsLoading="true">Yükleniyor</YtButton>
<YtButton Disabled="true">Devre Dışı</YtButton>

@* Event Handler *@
<YtButton OnClick="HandleClick">Tıkla</YtButton>

@code {
    private async Task HandleClick()
    {
        // İşlem
    }
}

Input

@* Temel Kullanım *@
<YtInput TValue="string" @bind-Value="_name" Label="Ad Soyad" />

@* Varyantlar *@
<YtInput TValue="string" @bind-Value="_email" 
         Label="E-posta" 
         Type="InputType.Email"
         Variant="InputVariant.Filled" />

@* Floating Label *@
<YtInput TValue="string" @bind-Value="_phone" 
         Label="Telefon" 
         FloatingLabel="true" />

@* İkonlar *@
<YtInput TValue="string" @bind-Value="_search" 
         Placeholder="Ara..." 
         Icon="ti ti-search" 
         Clearable="true" />

@* Validation *@
<YtInput TValue="string" @bind-Value="_password" 
         Label="Şifre" 
         Type="InputType.Password"
         Required="true"
         ErrorMessage="@_passwordError" />

@* Sayısal Giriş *@
<YtInput TValue="int" @bind-Value="_quantity" 
         Label="Miktar" 
         Type="InputType.Number"
         Min="1" 
         Max="100" 
         Step="1" />

@code {
    private string _name = "";
    private string _email = "";
    private string _phone = "";
    private string _search = "";
    private string _password = "";
    private string? _passwordError;
    private int _quantity = 1;
}

<YtButton OnClick="() => _showModal = true">Modal Aç</YtButton>

<YtModal @bind-IsOpen="_showModal" 
         Title="Onay" 
         Size="YtModal.ModalSize.Default"
         Centered="true"
         CloseOnEscape="true"
         CloseOnBackdrop="true">
    <ChildContent>
        <p>Bu işlemi onaylıyor musunuz?</p>
    </ChildContent>
    <Footer>
        <YtButton Color="YtButton.ButtonColor.Secondary" 
                  OnClick="() => _showModal = false">İptal</YtButton>
        <YtButton Color="YtButton.ButtonColor.Primary" 
                  OnClick="HandleConfirm">Onayla</YtButton>
    </Footer>
</YtModal>

@code {
    private bool _showModal;
    
    private async Task HandleConfirm()
    {
        // İşlem
        _showModal = false;
    }
}

Card

@* Temel Kart *@
<YtCard Title="Kart Başlığı" Subtitle="Alt başlık">
    <p>Kart içeriği</p>
</YtCard>

@* Renkli Kart *@
<YtCard Title="Success Card" 
        Color="CardColor.Success" 
        Variant="CardVariant.Label">
    <p>Başarılı işlem kartı</p>
</YtCard>

@* Görsel Kart *@
<YtCard Title="Görsel Kart" 
        ImageUrl="/img/sample.jpg" 
        ImagePosition="CardImagePosition.Top">
    <p>Açıklama metni</p>
</YtCard>

@* Header Actions *@
<YtCard Title="Aksiyon Kartı">
    <HeaderActions>
        <YtButton Icon="edit" IconOnly="true" Size="YtButton.ButtonSize.Small" />
        <YtButton Icon="trash" IconOnly="true" Size="YtButton.ButtonSize.Small" 
                  Color="YtButton.ButtonColor.Danger" />
    </HeaderActions>
    <p>İçerik</p>
</YtCard>

@* Collapsible *@
<YtCard Title="Açılır Kart" Collapsible="true" Collapsed="false">
    <p>Açılıp kapanabilen içerik</p>
</YtCard>

Toast Service

@inject IToastService ToastService

<YtButton Color="YtButton.ButtonColor.Success" OnClick="ShowSuccess">Başarılı</YtButton>
<YtButton Color="YtButton.ButtonColor.Danger" OnClick="ShowError">Hata</YtButton>
<YtButton Color="YtButton.ButtonColor.Warning" OnClick="ShowWarning">Uyarı</YtButton>
<YtButton Color="YtButton.ButtonColor.Info" OnClick="ShowInfo">Bilgi</YtButton>

@* Toast Container (Layout'a bir kez ekleyin) *@
<YtToastContainer Position="YtToastContainer.ToastPosition.TopRight" />

@code {
    private void ShowSuccess() => ToastService.ShowSuccess("İşlem başarılı!", "Başarılı");
    private void ShowError() => ToastService.ShowError("Bir hata oluştu!", "Hata");
    private void ShowWarning() => ToastService.ShowWarning("Dikkat!", "Uyarı");
    private void ShowInfo() => ToastService.ShowInfo("Bilginize.", "Bilgi");
}

Form Validation

<EditForm Model="_model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    
    <YtInput TValue="string" @bind-Value="_model.Email" 
             Label="E-posta" 
             Type="InputType.Email"
             Required="true" />
    
    <YtInput TValue="string" @bind-Value="_model.Password" 
             Label="Şifre" 
             Type="InputType.Password"
             Required="true" />
    
    <YtSelect TValue="string" @bind-Value="_model.Country" 
              Label="Ülke" 
              Required="true">
        <option value="">Seçiniz...</option>
        <option value="TR">Türkiye</option>
        <option value="US">ABD</option>
    </YtSelect>
    
    <YtCheckbox @bind-Value="_model.AcceptTerms" 
                Label="Şartları kabul ediyorum" />
    
    <YtButton Type="submit" Color="YtButton.ButtonColor.Primary" Block="true">
        Kayıt Ol
    </YtButton>
</EditForm>

@code {
    private RegisterModel _model = new();
    
    private async Task HandleSubmit()
    {
        // Form gönderimi
    }
    
    public class RegisterModel
    {
        [Required(ErrorMessage = "E-posta zorunludur")]
        [EmailAddress(ErrorMessage = "Geçerli bir e-posta girin")]
        public string Email { get; set; } = "";
        
        [Required(ErrorMessage = "Şifre zorunludur")]
        [MinLength(6, ErrorMessage = "Şifre en az 6 karakter olmalı")]
        public string Password { get; set; } = "";
        
        [Required(ErrorMessage = "Ülke seçiniz")]
        public string Country { get; set; } = "";
        
        public bool AcceptTerms { get; set; }
    }
}

🎯 Enum Referansları

YtButton

// Renkler
YtButton.ButtonColor.Primary | Secondary | Success | Danger | Warning | Info | Light | Dark

// Varyantlar
YtButton.ButtonVariant.Filled | Outline | Label | Text | Gradient

// Boyutlar
YtButton.ButtonSize.ExtraSmall | Small | Medium | Large | ExtraLarge

// Sosyal Medya
YtButton.SocialType.Facebook | Twitter | Google | Instagram | LinkedIn | GitHub | YouTube | Pinterest | Slack | Dribbble | Reddit

YtAlert

// Renkler
YtAlert.AlertColor.Primary | Secondary | Success | Danger | Warning | Info | Dark

// Varyantlar
YtAlert.AlertVariant.Filled | Outline | Solid | Label

YtBadge

// Renkler
YtBadge.BadgeColor.Primary | Secondary | Success | Danger | Warning | Info | Light | Dark

// Varyantlar
YtBadge.BadgeVariant.Filled | Outline | Label

// Boyutlar
YtBadge.BadgeSize.Small | Default | Large

// Şekiller
YtBadge.BadgeShape.Default | Circle | Square

YtModal

// Boyutlar
YtModal.ModalSize.Small | Default | Large | ExtraLarge | Fullscreen

YtInput

// Tipler
InputType.Text | Password | Email | Number | Tel | Url | Date | Time | DateTime | Search | Color | Textarea

// Boyutlar
InputSize.Small | Default | Large

// Renkler
InputColor.Default | Primary | Secondary | Success | Danger | Warning | Info

// Varyantlar
InputVariant.Outlined | Filled | Underlined

// Validation States
ValidationState.None | Success | Warning | Error

🔧 Gelişmiş Yapılandırma

Özel CSS Değişkenleri

:root {
    /* Ana Renkler */
    --yts-primary: #7367f0;
    --yts-secondary: #a8aaae;
    --yts-success: #28c76f;
    --yts-danger: #ea5455;
    --yts-warning: #ff9f43;
    --yts-info: #00cfe8;
    
    /* Arka Plan */
    --yts-body-bg: #f8f7fa;
    --yts-card-bg: #ffffff;
    
    /* Metin */
    --yts-body-color: #6e6b7b;
    --yts-heading-color: #5e5873;
    
    /* Border */
    --yts-border-color: #ebe9f1;
    --yts-border-radius: 0.428rem;
}

/* Dark Mode */
.yts-dark {
    --yts-body-bg: #161d31;
    --yts-card-bg: #283046;
    --yts-body-color: #b4b7bd;
    --yts-heading-color: #d0d2d6;
    --yts-border-color: #3b4253;
}

JavaScript API

// Tema değiştirme
window.YtsTheme.setTheme('dark'); // 'light' | 'dark' | 'system'

// Modal focus trap
window.YtModal.trapFocus(modalElement);

// Dropdown click outside
window.YtDropdown.registerClickOutside(elementId, dotNetRef);
window.YtDropdown.unregisterClickOutside(elementId);

📝 Lisans

MIT License - Detaylar için LICENSE dosyasına bakın.

🤝 Katkıda Bulunma

Fork yapın
Feature branch oluşturun (git checkout -b feature/amazing-feature)
Değişikliklerinizi commit edin (git commit -m 'Add amazing feature')
Branch'i push edin (git push origin feature/amazing-feature)
Pull Request açın

📞 Destek

📧 E-posta: support@yeditepe.dev
🐛 Bug Report: GitHub Issues
💬 Discussions: GitHub Discussions

📜 Changelog

v1.0.0

İlk sürüm
30+ temel component
Dark/Light tema desteği
Form validation entegrasyonu

Product	Compatible and additional computed target framework versions.
.NET	net10.0 is compatible. net10.0-android was computed. net10.0-browser was computed. net10.0-ios was computed. net10.0-maccatalyst was computed. net10.0-macos was computed. net10.0-tvos was computed. net10.0-windows was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net10.0
- Microsoft.AspNetCore.Components.Web (>= 10.0.1)
- Yeditepe.Theme.Core (>= 1.0.1)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
1.0.1	208	12/22/2025