# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Başlarken

- [Genel Bakış](https://www.mdui.org/tr/docs/2/index.md): mdui, 50+ Material Design bileşeni içeren premium bir Web Components kütüphanesidir. Koyu mod, yerelleştirme ve TypeScript ile modern uygulamaları kolayca ve hızla oluşturun.
- [Kurulum](https://www.mdui.org/tr/docs/2/getting-started/installation.md): mdui'yi npm veya CDN ile kurun. Paket boyutunu düşüren seçici içe aktarma desteği sunar. Global ve ES modül sürümleriyle entegrasyonu kolaylaştıran rehberleri keşfedin.
- [Hızlı Başlangıç](https://www.mdui.org/tr/docs/2/getting-started/usage.md): Web Components tabanlı mdui; öznitelik, özellik, yöntem ve olay kullanımını anlatır. Bileşen güncellemelerini ve Shadow DOM stil yönetimini rehberlerimizle hızla öğrenin.
- [TypeScript Desteği](https://www.mdui.org/tr/docs/2/getting-started/typescript-support.md): TypeScript ile yazılan mdui, tüm bileşenler için tam tip tanımları sunar. Otomatik tamamlama ve tip denetimiyle geliştirme verimliliğini ve kod kalitesini hızla artırın.
- [IDE Desteği](https://www.mdui.org/tr/docs/2/getting-started/ide-support.md): VS Code ve WebStorm için optimize edilen mdui ile kod tamamlama desteği kazanın. Tam HTML ve CSS veri desteği, geliştirme hızını ve üretkenliği önemli ölçüde artıracaktır.
- [Yerelleştirme](https://www.mdui.org/tr/docs/2/getting-started/localization.md): 50+ yerel paketle yerleşik çok dilli destek. CDN veya npm ile yavaş yükleme, ön yükleme ve statik içe aktarmayı destekler. Yerelleştirme ile küresel uygulamalar oluşturun.
- [Sıkça Sorulan Sorular](https://www.mdui.org/tr/docs/2/getting-started/faq.md): mdui topluluğundan sıkça sorulan sorular ve resmi yanıtlar. Kendi kendine kapanan etiketler ve FOUC gibi sorunlara yönelik çözümler, ipuçları ve kod örneklerini burada bulun.

## AI Destekli Geliştirme

- [LLMs.txt](https://www.mdui.org/tr/docs/2/ai/llms.md): mdui, LLM'ler için doğru bağlam sunan llms.txt ve llms-full.txt dosyalarını sağlar. Markdown belgeler doğrudan yapıştırma desteğiyle AI yanıtlarının doğruluğunu artırır.
- [MCP Sunucusu](https://www.mdui.org/tr/docs/2/ai/mcp.md): @mdui/mcp, AI ajanları için MCP sunucularını entegre eder. AI kodlama deneyimini derinleştirmek için öznitelikleri, simgeleri ve CSS custom property verilerini sorgulayın.

## Stiller

- [Koyu Mod](https://www.mdui.org/tr/docs/2/styles/dark-mode.md): Tüm bileşenler yerleşik Koyu Mod desteğine sahiptir. Sistem tercihlerine göre veya setTheme ile manuel değişebilir. Her uygulama için küresel veya kapsamlı tema desteği sunar.
- [Dinamik Renk](https://www.mdui.org/tr/docs/2/styles/dynamic-color.md): Temel renk veya görselden otomatik olarak tam açık ve koyu paletler üretin. Kişiselleştirilmiş ve uyumlu temalar oluşturmak için setColorScheme ve getColorFromImage kullanın.
- [Tipografi](https://www.mdui.org/tr/docs/2/styles/prose.md): mdui-prose ve mdui-table sınıfları, makale ve tablo düzenini optimize eder. Dinamik ve Markdown içerikleri için zahmetsizce zarif tipografi ve ideal boşluklandırmayı yaşayın.
- [Design Tokens](https://www.mdui.org/tr/docs/2/styles/design-tokens.md): CSS Custom Property ile gelen Design Tokens sistemi; renkler ve köşeler için 100+ token içerir. Benzersiz bir görünüm oluşturmak için bu tokenları kolayca özelleştirin.

## Frameworklerle Entegrasyon

- [React ile Entegrasyon](https://www.mdui.org/tr/docs/2/frameworks/react.md): Web Components tabanlı mdui, React ile kusursuz entegre olur. Olay bağlama ve özellik senkronizasyonu için tam TypeScript desteği ve en iyi uygulama rehberlerini keşfedin.
- [Vue ile Entegrasyon](https://www.mdui.org/tr/docs/2/frameworks/vue.md): Şablon derleyici yapılandırmasıyla kolay Vue entegrasyonu. v-model desteği, özel olay dinleme, tam TypeScript tipleri ve IDE ipuçlarıyla geliştirme sürecini hızla tamamlayın.
- [Angular ile Entegrasyon](https://www.mdui.org/tr/docs/2/frameworks/angular.md): Angular için CUSTOM_ELEMENTS_SCHEMA gerekir. Ayrıntılı entegrasyon rehberleri ve örnekleri sunar. DI, iki yönlü bağlama ve tam TypeScript tiplerini kapsamlı olarak destekler.
- [Diğer Çerçevelerle Entegrasyon](https://www.mdui.org/tr/docs/2/frameworks/others.md): Standart Web Components üzerine kurulu mdui; Svelte, Next.js veya Nuxt gibi modern frameworklerle entegre olur. En iyi uygulamalar ve evrensel entegrasyon rehberleri burada.

## Bileşenler

- [Avatar Bileşeni](https://www.mdui.org/tr/docs/2/components/avatar.md): Avatar; kullanıcıları veya markaları resim, simge ve metinle temsil eder. Çeşitli boyutlarda dairesel veya kare şekilleri destekler. Profiller ve yorumlar için çok idealdir.
- [Rozet Bileşeni Badge](https://www.mdui.org/tr/docs/2/components/badge.md): Rozet, sayı veya durum etiketlerini görüntüler. Sayılar veya metinle küçük ve büyük boyutları destekler. Bildirimler ve göstergeler için bileşenlere zahmetsizce eklenir.
- [Alt Uygulama Çubuğu Bileşeni](https://www.mdui.org/tr/docs/2/components/bottom-app-bar.md): Alt Uygulama Çubuğu, mobilde alt kısımda gezinme sağlar. Fab, öğeler ve menüleri entegre eder. Sabit konumlar ve özel stiller için kaydırmada gizleme desteği sunar.
- [Buton Bileşeni](https://www.mdui.org/tr/docs/2/components/button.md): Buton; yükseltilmiş, dolu, tonal, çizgili ve metin stillerini destekler. Simgeler, yükleme durumları ve Material Design 3 rehberine dayalı tam erişilebilirlik sunar.
- [Simge Butonu Bileşeni](https://www.mdui.org/tr/docs/2/components/button-icon.md): İkincil işlemler için Simge Butonu; standart, dolu, tonal ve çizgili stilleri destekler. Yükleme durumları ve bağlantılarla araç çubukları ve kart başlıkları için idealdir.
- [Kart Bileşeni](https://www.mdui.org/tr/docs/2/components/card.md): Kart; ilgili içerik ve eylemler için çok yönlü bir kapsayıcıdır. Tıklanabilir mdui desteği ve medya öğeleri sunan üç ana stiliyle her arayüz için temel bir yapıdır.
- [Onay Kutusu Bileşeni](https://www.mdui.org/tr/docs/2/components/checkbox.md): Onay Kutusu, birden fazla seçenek seçilmesine olanak tanır. İşaretli, işaretsiz ve belirsiz durumları destekler. Özel simgeler ve doğrulama gibi tam bir form desteği sunar.
- [Chip Bileşeni](https://www.mdui.org/tr/docs/2/components/chip.md): Chip; girdi, seçim veya filtrelemeyi temsil eder. Seçilebilir ve kaldırılabilir destek; filtre, girdi ve öneri türlerini içerir. Kategorizasyon için ideal bir çözüm sunar.
- [Dairesel İlerleme Bileşeni](https://www.mdui.org/tr/docs/2/components/circular-progress.md): Dairesel İlerleme, ilerlemeyi dairesel çubukla gösterir. Belirli değer ve döndürücü modlarını destekler. Sayfa yenileme veya buton yüklemesi için farklı boyut ve renkler sunar.
- [Daraltılabilir Panel Bileşeni](https://www.mdui.org/tr/docs/2/components/collapse.md): Collapse, yerden tasarruf etmek için içeriği gruplandırılmış bölümlere ayırır. Akordeon modu, özel tetikleyiciler ve animasyonlar sunar. SSS ve ayar sayfaları için idealdir.
- [Diyalog Bileşeni](https://www.mdui.org/tr/docs/2/components/dialog.md): Önemli bilgiler veya kararlar için Diyalog. Mod ve tam ekran modlarıyla başlık, simge ve butonları destekler. Alert, confirm ve prompt gibi programatik fonksiyonlar sunar.
- [Ayırıcı Bileşeni](https://www.mdui.org/tr/docs/2/components/divider.md): Ayırıcı, listeler ve düzenler için görsel ayrım sağlar. Özel girintilerle yatay ve dikey modları destekler. Net arayüz hiyerarşisi için temel bir mdui düzenleme aracıdır.
- [Açılır Menü Bileşeni](https://www.mdui.org/tr/docs/2/components/dropdown.md): Dropdown bileşeni, tıklama veya imleç konumunda menü veya içerik tetikler. Zengin etkileşimler için çoklu tetikleme modları, konumlandırma ve gecikme özellikleri sunar.
- [Yüzen İşlem Butonu Bileşeni](https://www.mdui.org/tr/docs/2/components/fab.md): Kayan İşlem Butonu, ana eylemleri üç boyutta ve normal veya genişletilmiş formlarda vurgular. Özelliklere hızlı erişim için simgeler, renkler ve yükleme durumları sunar.
- [Simge Bileşeni](https://www.mdui.org/tr/docs/2/components/icon.md): Simge, Material Simgesi veya özel SVG'lerle eylemleri temsil eder. CSS ile boyut ve rengi özelleştirin. Buton ve menülerle beraber arayüz tanınırlığını artıran bir bileşendir.
- [Layout Bileşeni](https://www.mdui.org/tr/docs/2/components/layout.md): Layout; uygulama çubuklarını, çekmeceleri ve içeriği düzenler. Eksiksiz sayfa yapıları kurmak için özel breakpoint ve boşluklara sahip duyarlı bir grid sistemi sunar.
- [Doğrusal İlerleme Bileşeni](https://www.mdui.org/tr/docs/2/components/linear-progress.md): Doğrusal İlerleme, görevin ilerlemesini yatay çubuklarla gösterir. Belirli ve belirsiz modları destekler. Yükleme arayüzleri için özel renkler ve yükseklik ayarları sunar.
- [Liste Bileşeni](https://www.mdui.org/tr/docs/2/components/list.md): Liste; dikey öğeleri görüntüler. Avatarlar, simgeler ve bağlantıyla tek, çift veya üç satırı destekler. Özelleştirilebilir düzen ve içerik yapısıyla arayüzlere uyum sağlar.
- [Menü Bileşeni](https://www.mdui.org/tr/docs/2/components/menu.md): Menü, dikey işlem seçeneklerini görüntüler. Seçim modları, alt menüler, kısayollar ve özel içeriği destekler. Bağlam menüleri ve derin gezinme için ideal bir çözümdür.
- [Alt Gezinme Çubuğu Bileşeni](https://www.mdui.org/tr/docs/2/components/navigation-bar.md): Mobilde ana sayfalar arasında geçiş için Gezinme Çubuğu. Etiketler, simgeler ve rozetlerle 3-5 öğeyi destekler. Kaydırmada gizleme ve özel kapsayıcı modlarını hızla sunar.
- [Gezinme Çekmecesi Bileşeni](https://www.mdui.org/tr/docs/2/components/navigation-drawer.md): Gezinme Çekmecesi, gezinme için yandan kayar. Sol veya sağ için modlu ve modsuz modları destekler. Kullanıcı bilgileri ve listeler gibi özellikler sunan mdui bileşenidir.
- [Yan Gezinme Çubuğu Bileşeni](https://www.mdui.org/tr/docs/2/components/navigation-rail.md): Gezinme Rayı, tablet ve masaüstü için kompakt gezinme sağlar. Rozetleri, ayırıcıyı ve özel hizalamayı destekler. İsteğe bağlı etiketlerle simgeleri şık bir biçimde sunar.
- [Radyo Butonu Bileşeni](https://www.mdui.org/tr/docs/2/components/radio.md): Birbirini dışlayan seçimler için Radyo Butonu. Aynı anda tek seçeneğin seçilmesini sağlar. Formlar için özel simgeler ve devre dışı kalma durumlarını tam olarak destekler.
- [Aralık Kaydırıcısı Bileşeni](https://www.mdui.org/tr/docs/2/components/range-slider.md): Aralık Kaydırıcısı, çift başparmakla bir değer aralığı seçmeyi sağlar. Kesikli adımlar, özel etiketler ve doğrulama sunar. Fiyat veya zaman aralıkları için yaygın kullanılır.
- [Seçim Kutusu Bileşeni](https://www.mdui.org/tr/docs/2/components/select.md): Seçim kutusu, bir açılır menüden tekli veya çoklu seçime olanak sunar. Etiketler, doğrulama ve özel simgeler sunar. Veri girişi ve filtreleme için ideal bir çözümdür.
- [Segmentli Buton Bileşeni](https://www.mdui.org/tr/docs/2/components/segmented-button.md): Segmentli Buton; görünüm değiştirme veya filtreleme için tekli ve çoklu seçimi destekler. Simgeler, bağlantılar ve özel stillerle UI kontrolleri için temel bir bileşendir.
- [Kaydırıcı Bileşeni](https://www.mdui.org/tr/docs/2/components/slider.md): Kaydırıcı, adım kontrolü ve onay işaretleriyle değer seçimine izin verir. Doğrulama, otomatik odaklama ve özel etiketler sunar. Ses ve parlaklık ayarları için çok idealdir.
- [Snackbar Bileşeni](https://www.mdui.org/tr/docs/2/components/snackbar.md): Snackbar, işlem butonları ve otomatik kapanma ile kısa geri bildirimler sağlar. Daha iyi bir deneyim için özel renkler, konumlar ve programatik çağrıları destekler.
- [Anahtar Bileşeni](https://www.mdui.org/tr/docs/2/components/switch.md): Anahtar, anında geri bildirimle ikili ayarları değiştirir. Özel simgeler, renkler ve boyutları destekler. Ayarlar sayfaları ve tercih yönetimi için mükemmel bir bileşendir.
- [Sekme Bileşeni](https://www.mdui.org/tr/docs/2/components/tabs.md): Sekmeler, tek bir alanda birden fazla görünüm arasında geçiş yapar. Simgeler, rozetler ve özel göstergelerle iki stili de destekler. Kategori gezintisi için ideal bir çözümdür.
- [Metin Alanı Bileşeni](https://www.mdui.org/tr/docs/2/components/text-field.md): Metin Alanı; parolalar ve e-postalar için giriş desteği sağlar. Etiketler, simgeler ve doğrulama sunar. Otomatik yükseklik desteğiyle tam erişilebilir bir yapıdadır.
- [Tooltip Bileşeni](https://www.mdui.org/tr/docs/2/components/tooltip.md): Tooltip, üzerine gelindiğinde veya odaklanıldığında ek bilgiler gösterir. Zengin metin ve ayarlanabilir gecikmeleri destekler. İşlevleri anlamanıza yardımcı olan bir araçtır.
- [Üst Uygulama Çubuğu Bileşeni](https://www.mdui.org/tr/docs/2/components/top-app-bar.md): Üst Uygulama Çubuğu; üstte başlık, gezinti ve eylem sağlar. Çoklu stil, kaydırma efekti ve özel buton sunar. Uygulama gezintisi için birleşik ve düzenli bir başlıktır.

## Fonksiyonlar

- [jq yardımcı kütüphanesi](https://www.mdui.org/tr/docs/2/functions/jq.md): 1/6 boyutunda jQuery benzeri API'li yerleşik küçük jq kütüphanesi. Bağımlılık olmadan zincirlenebilir DOM, olay ve animasyonları verimli şekilde destekleyen bir araçtır.
- [dialog fonksiyonu](https://www.mdui.org/tr/docs/2/functions/dialog.md): mdui-dialog için programatik sarmalayıcı. HTML kullanmadan JavaScript ile diyalog açın. Özel başlık ve butonları destekler; kullanıcı etkileşimi için Promise döndürür.
- [alert fonksiyonu](https://www.mdui.org/tr/docs/2/functions/alert.md): window.alert için modern bir alternatif. Sayfa oluşturma sürecini engellemeden; özel başlıklar ve butonlarla temalı uyarı diyaloglarını kolayca ve hızla görüntüleyin.
- [confirm fonksiyonu](https://www.mdui.org/tr/docs/2/functions/confirm.md): window.confirm için Material Design alternatifi. Programatik onay diyalogları gösterin ve daha iyi stil için kullanıcı seçimlerini basit bir Promise ile hemen yönetin.
- [prompt fonksiyonu](https://www.mdui.org/tr/docs/2/functions/prompt.md): window.prompt için Material Design alternatifi. Doğrulama ve özel türlerle diyaloglar üzerinden kullanıcı girişini yakalar. Giriş değeriyle beraber bir Promise döner.
- [snackbar fonksiyonu](https://www.mdui.org/tr/docs/2/functions/snackbar.md): mdui-snackbar için programatik çağrı. Özel eylem, süre ve yerleşimle geri bildirim mesajlarını hızla gösterin. Anlık bildirimler için herhangi bir HTML kodu gerekmez.
- [getTheme fonksiyonu](https://www.mdui.org/tr/docs/2/functions/getTheme.md): Sayfa veya öğeler için tema ayarlarını alın. Açık, koyu ve otomatik modları destekler. Mantığı aktif temaya göre dinamik ayarlamak için mdui deki kullanışlı bir yoldur.
- [setTheme fonksiyonu](https://www.mdui.org/tr/docs/2/functions/setTheme.md): Sayfa veya öğeler için açık, koyu veya otomatik temaları dinamik ayarlayın. Esnek bir deneyim için küresel veya kapsamlı tema geçersiz kılma desteğini mdui ile kullanın.
- [getColorFromImage fonksiyonu](https://www.mdui.org/tr/docs/2/functions/getColorFromImage.md): Görüntüden baskın rengi hex olarak çıkarın. İçerikle otomatik eşleşen uyumlu paletler oluşturmak için bu fonksiyonu mdui deki setColorScheme fonksiyonuyla eşleştirin.
- [setColorScheme fonksiyonu](https://www.mdui.org/tr/docs/2/functions/setColorScheme.md): Tek bir hex renkten tam Material Design paletleri oluşturun. Markalama ve uyumlu renk şeması özelleştirmesi için küresel veya yerel ayarları kapsamlı olarak destekler.
- [removeColorScheme fonksiyonu](https://www.mdui.org/tr/docs/2/functions/removeColorScheme.md): Varsayılan paleti geri yüklemek için özel renk şemalarını kaldırın. Küresel veya yerel uygulanabilir; tema sıfırlama ve mod değişimi için en ideal mdui çözümüdür.
- [loadLocale fonksiyonu](https://www.mdui.org/tr/docs/2/functions/loadLocale.md): Uygulama yerelleştirmesi için dil paketlerini yükleyin. 50+ dil için yavaş, ön yükleme ve statik yöntemleri destekler. Performans ve her ihtiyaca göre optimize edildi.
- [setLocale fonksiyonu](https://www.mdui.org/tr/docs/2/functions/setLocale.md): Uygulama dil kodlarını dinamik ayarlayın. Sayfayı yeniden yüklemeden kusursuz yerelleştirme için mdui bileşen güncellemelerini otomatik tetikleyen bir yapısı vardır.
- [getLocale fonksiyonu](https://www.mdui.org/tr/docs/2/functions/getLocale.md): Uygulamanın geçerli dil kodunu alın. Ortam algılama, varlık yükleme veya düzen ayarı için kullanın. Basit dil kodu dizeleriyle esnek geliştirme süreçleri sunar.
- [throttle fonksiyonu](https://www.mdui.org/tr/docs/2/functions/throttle.md): Yürütme sıklığını sınırlamak için kısıtlama fonksiyonu oluşturun. Kaydırma gibi yüksek frekanslı olaylar için idealdir ve uygulama performansını mdui üzerinde artırır.
- [observeResize fonksiyonu](https://www.mdui.org/tr/docs/2/functions/observeResize.md): ResizeObserver API ile öğe boyutunu izleyin. Duyarlı düzen veya uyarlanabilir kapsayıcı için geri çağrıları tetikler. Basit temizleme desteği ve üstün verimlilik sunar.
- [breakpoint fonksiyonu](https://www.mdui.org/tr/docs/2/functions/breakpoint.md): Breakpoint değerlerini kontrol edin. Genişliğin belirtilen bir aralıkta olup olmadığını değerlendirerek mdui üzerinde özel responsive UI mantığı kurgulayıp uygulayın.

## Kütüphaneler

- [Simge Bileşen Kütüphanesi @mdui/icons](https://www.mdui.org/tr/docs/2/libraries/icons.md): Tüm Google simgelerini içeren bağımsız Material Icons kütüphanesi. Paket boyutunu azaltmak için seçici içe aktarmaya göre optimize edilmiş özel bir mdui paketidir.