Yeditepe.Theme.Core 1.0.1

.NET 10.0

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

NuGet\Install-Package Yeditepe.Theme.Core -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.Core" 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.Core" Version="1.0.1" />
                    

                            Directory.Packages.props

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

                            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.Core --version 1.0.1

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

#r "nuget: Yeditepe.Theme.Core, 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.Core@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.Core&version=1.0.1
                    

                            Install as a Cake Addin

#tool nuget:?package=Yeditepe.Theme.Core&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)

NuGet packages (1)

Showing the top 1 NuGet packages that depend on Yeditepe.Theme.Core:

Package	Downloads
Yeditepe.Theme.Admin Admin panel theme and components for Yeditepe applications. Built on Yeditepe.Theme.Core.	208

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last Updated
1.0.1	207	12/22/2025