Bileşenler

Bileşenlere genel bakış

Belgelenen her bileşen ve kategorisi; ada, açıklamaya ve kategoriye göre arama.

Bileşen listesi

Arama kutusu adı, açıklamayı ve kategoriyi tarar; kategori düğmeleri tabloyu tek bir gruba indirir.

105 / 105 bileşen gösteriliyor

Bileşen	Kategori
Accordion Her biri bir içerik bölümünü açıp kapatan başlıklar yığını.	Düzen ve temel
Box Dolgu, yüzey rengi, kenarlık ve köşe yarıçapını token değerleriyle veren kapsayıcıdır.	Düzen ve temel
Collapsible Tek bir içerik bölümünü gösterip gizleyen açılır alan.	Düzen ve temel
Container Sayfa içeriğini ortalar ve genişliğini sınırlar.	Düzen ve temel
Grid Sayfa bölgeleri ve pano yerleşimleri için eşit sütunlu, duyarlı ızgara ve hücre bileşeni (Grid.Item) sunar.	Düzen ve temel
Heading Sayfa ve bölüm başlıklarını yazar; belge düzeyi görsel boyuttan ayrıdır.	Düzen ve temel
Icon Kayıtlı ikon setinden bir simge çizer; ad verilmedikçe süstür ve ekran okuyucudan gizlenir.	Düzen ve temel
Inline Çocukları yatay olarak dizer, dar yerde alt satıra sarar ve aralarındaki boşluğu token ile verir.	Düzen ve temel
Kbd Bir klavye tuşunu ya da kısayolunu gösteren öğe.	Düzen ve temel
Provider İçindeki her şey için dil, yazı yönü ve hareket tercihini belirler; yerleşimi değiştirmez.	Düzen ve temel
ScrollArea Temaya uyan ince kaydırma çubukları ve solan kenarlarla kaydırılabilir alan.	Düzen ve temel
Separator İçeriği gruplara ayıran ince bir çizgi; isteğe bağlı olarak ortasında kısa bir etiket taşır.	Düzen ve temel
Stack Çocukları dikey olarak dizer ve aralarındaki boşluğu token ile verir.	Düzen ve temel
Text Gövde metni, etiket, açıklama ve rakamları token tipografisiyle yazar.	Düzen ve temel
VisuallyHidden İçeriği gözden gizler, ekran okuyucuya açık tutar.	Düzen ve temel
ActionBar Seçili öğeler için toplu eylemler; ilk seçimde belirir, kaç öğe seçildiğini söyler.	Eylemler
Button Kullanıcının bir işlemi başlatmasını sağlar ve o alandaki en önemli eylemi görünür kılar.	Eylemler
ButtonGroup İlişkili butonları aralıklı ya da birleşik olarak tek satırda ya da sütunda toplar.	Eylemler
ContextMenu Bir alana sağ tıklayınca ya da basılı tutunca işaretçinin yanında açılan işlem menüsü.	Eylemler
Copy Bir değeri panoya kopyalayan, onay işaretiyle gösterip duyuran düğme.	Eylemler
DropdownMenu Bir butonun arkasındaki eylem listesi; seçim öğeleri, gruplar, alt menüler ve kısayollarla.	Eylemler
IconButton Yalnızca ikon taşıyan, zorunlu erişilebilir adı olan işlem butonu.	Eylemler
Link Bir sayfaya ya da adrese giden bağlantı; metnin içinde ya da kendi satırında durur.	Eylemler
SaveBar Formda kaydedilmemiş değişiklik varken alttan yükselen, Kaydet ve Vazgeç düğmeli çubuk.	Eylemler
SegmentedControl Aynı içeriğin iki ile beş görünümü arasında tek seçim yapan, kayan göstergeli denetim.	Eylemler
SplitButton Ana eylemi, ilgili eylemleri listeleyen bir menü düğmesiyle birleştiren düğme.	Eylemler
Toggle Basılı kalan iki durumlu buton; bir ayarı açar ya da kapatır.	Eylemler
ToggleGroup Tek bir değeri paylaşan Toggle seti; tek sekme durağı, öğeler arasında ok tuşları.	Eylemler
Toolbar Tek sekme durağı olan, ok tuşlarıyla gezilen ilgili denetimler satırı.	Eylemler
AmountInput Provider dilinde yazılan ve kuruş cinsinden kesin değer bildiren tutar alanı; kayan nokta kullanmaz.	Formlar
Autocomplete Yazarken öneri gösteren, ama her metni kabul eden metin alanı.	Formlar
Calendar Tek bir tarih seçmek için ay ızgarası; Türkçede hafta pazartesi başlar.	Formlar
Checkbox İşaretli ya da işaretsiz bir kutu ve yanındaki etiket.	Formlar
CheckboxGroup İlişkili onay kutularını bir başlık altında toplayan ve değer listesini paylaştıran grup.	Formlar
Combobox Yazarak daraltılan listeden bir ya da birden çok seçim; sunucu sonuçları ve yeni seçenek ekleme destekli.	Formlar
ConsentBlock Kaydırılabilir bir alanda okunacak metin, okuma çubuğu ve sona kadar bekleyebilen bir onay kutusu.	Formlar
DatePicker Gün, ay ve yıl parçalarına yazılan ya da açılır takvimden seçilen tarih alanı.	Formlar
DateRangePicker Başlangıç ve bitiş parçalarına yazılan ya da hazır aralıklar ve iki aylık takvimle seçilen tarih aralığı.	Formlar
DateTimePicker Tarihi ve saati birlikte seçtiren alan grubu: bir DatePicker ve bir TimeField.	Formlar
Field Her form denetimi için etiket, denetim, yardım metni, hata ve sayacı kimliklerle bağlayan kap.	Formlar
FileDropzone Dosya sürükleyip bırakma alanı, dosya seçici ve seçilen dosyaların listesi.	Formlar
Form Gönderirken alanları denetleyen, sorunları bağlantılı bir özetle gösteren ve odağı özete taşıyan form.	Formlar
IbanInput Sabit TR öneki, yazarken dörtlü gruplama ve mod 97 denetimiyle Türkiye IBAN alanı.	Formlar
InlineEdit Metin olarak gösterilen ve yerinde bir giriş alanına dönüşen değer; kaydet ve vazgeç ile.	Formlar
InputGroup Metin denetimini önüne, arkasına, üstüne ya da altına gelen eklerle tek kutuda toplar.	Formlar
Label Field dışındaki bir denetimi adlandıran, zorunluluk işaretini taşıyan etiket.	Formlar
MonthPicker Bir yılın on iki ayı arasından ay ve yıl seçtiren alan.	Formlar
NativeSelect Tarayıcının kendi seçim listesi; Select ile aynı görünen kapalı alan.	Formlar
NumberField Para olmayan sayılar için adım düğmeli, yerel biçimli sayı alanı.	Formlar
OtpInput Karakter başına bir kutulu, tek sekme duraklı tek kullanımlık kod alanı.	Formlar
PasswordInput Göz düğmeli şifre alanı; isteğe bağlı koşul listesi, güç çubuğu ve büyük harf uyarısı.	Formlar
PhoneInput Ülke kodu seçicili telefon alanı; Türkiye varsayılan, E.164 olarak gönderilir.	Formlar
RadioCard Başlık, açıklama ve simgeyle büyük bir seçenek; RadioGroup içinde kullanılır, kartın tamamı tıklanır.	Formlar
RadioGroup Birbirini dışlayan seçenekleri bir başlık altında toplayan ve tek seçime izin veren grup.	Formlar
SearchInput Temizleme düğmeli, gecikmeli aramalı ve yükleniyor durumlu arama alanı.	Formlar
Select Kısa ve kapalı bir listeden tek seçim; tetikleyiciden açılan bir liste.	Formlar
Slider Bir tutamacı iz boyunca sürükleyerek ya da ok tuşlarıyla bir değer veya aralık seçme.	Formlar
Switch Hemen etki eden açık ya da kapalı bir ayar ve yanındaki etiket.	Formlar
Textarea Açıklama, gerekçe ve not gibi çok satırlı metin girişi.	Formlar
TextInput Kullanıcının tek satırlık bir metin ya da sayı girmesini sağlar; etiket, yardım metni ve hata mesajı alana bağlı gelir.	Formlar
TimeField Saat ve dakika (isteğe bağlı saniye) parçalarına yazılan 24 saatlik saat alanı.	Formlar
YearPicker On iki yıllık bir sayfadan yıl seçtiren alan.	Formlar
Avatar Kişiyi ya da şirketi görseliyle, görsel yoksa baş harfleriyle tanıtır; isteğe bağlı durum noktası gösterir.	Veri gösterimi
Badge Bir kaydın durumunu kısa bir metinle ve renkle gösterir.	Veri gösterimi
Card İlgili içeriği ve işlemleri tek bir yüzeyde bir arada tutar.	Veri gösterimi
Chart Çizgi, alan, çubuk, yığılmış çubuk ve halka grafikleri ile küçük eğilim çizgisi; her grafikte özet ve veri tablosu vardır.	Veri gösterimi
CodeBlock Kodu eşaralıklı yazıyla, isteğe bağlı başlık, satır numaraları ve kopyala düğmesiyle gösterir.	Veri gösterimi
CountdownTimer Bir ana kadar kalan süreyi saat olarak, isteğe bağlı boşalan halkayla, uyarı rengiyle ve sesli ara bildirimlerle gösterir.	Veri gösterimi
DataTable Sıralama, seçim, sütun görünürlüğü ve sanallaştırma ile büyük ve değişen verileri tabloda gösterir.	Veri gösterimi
DateTimeText Bir tarihi, saati ya da göreli zamanı Provider dilinde, Intl ile bir time öğesinde yazan metin.	Veri gösterimi
DescriptionList Bir kaydın alanlarını terim ve değer çiftleri olarak, yerel dl, dt ve dd öğeleriyle gösterir.	Veri gösterimi
FilterBar Liste ya da tablo için süzme denetimleri: uygulanan filtre çipleri, sonuç sayısı ve tek tıkla temizleme.	Veri gösterimi
ListItem Listenin bir satırı: başta görsel, ortada başlık ve alt metin, sonda bilgi ya da işlem.	Veri gösterimi
MaskedValue Hassas bir değeri maskeli gösteren, bir düğmeyle açan ve isteğe bağlı olarak kopyalatan gösterim.	Veri gösterimi
Meter Bilinen bir aralıktaki tek bir değeri çubukla gösterir: kullanılan depolama, kota, puan.	Veri gösterimi
MoneyText Kuruş cinsinden bir tutarı Provider dilinde, kayan nokta kullanmadan yazan metin.	Veri gösterimi
Pagination Tablo ve listelerin altında sayfa ya da imleç gezintisi ve sayfa boyutu seçimi sağlar.	Veri gösterimi
StatCard Bir ölçünün değerini, önceki dönemle farkını ve isteğe bağlı eğilimini tek bir kutuda gösterir.	Veri gösterimi
StatusBadge Bir durumu, ortak durum sözlüğünden ton, simge ve metinle gösterir.	Veri gösterimi
Table Küçük, salt okunur verileri anlamsal bir HTML tablosunda gösterir.	Veri gösterimi
Tag Kategori, uygulanan filtre ya da alıcı gibi öğeleri etiketler; kaldırılabilir ya da seçilebilir.	Veri gösterimi
Timeline Bir ray boyunca sıralı olaylar: işaret, başlık, zaman ve isteğe bağlı ayrıntı.	Veri gösterimi
Banner Uygulamanın ya da sayfanın tepesinde, altındaki her şeyi etkileyen durum için tam genişlik mesaj.	Geri bildirim
EmptyState Bir sayfa, panel ya da liste henüz boşken ya da arama sonuç vermediğinde gösterilen açıklama ve sonraki adım.	Geri bildirim
InlineAlert İçeriğin içinde bir bölüm, form ya da sayfa hakkında bilgi, başarı, uyarı ya da hata mesajı.	Geri bildirim
ProgressBar Bir görevin ne kadar ilerlediğini gösteren ya da kalan süre bilinmezken kayan çubuk.	Geri bildirim
ResultState Bir görevin ya da akışın sonunda sonucu, bundan sonra ne olacağını ve sonraki adımları gösteren ekran.	Geri bildirim
Skeleton Henüz yüklenen içeriğin biçiminde bir yer tutucu.	Geri bildirim
Spinner Bir şey yüklenirken dönen açık yay; durumu ekran okuyucuya da bildirir.	Geri bildirim
Toast Bir işlemin sonucunu sayfanın köşesinde kısa süre gösteren, yığılan ve kaydırılarak kapatılan bildirim.	Geri bildirim
AlertDialog Görevi kesen ve tek bir soruya onay ya da vazgeçme isteyen kalıcı pencere.	Katmanlar
Dialog Sayfanın üzerinde açılan, bir görev ya da karar için odağı içinde tutan kalıcı pencere.	Katmanlar
Drawer Sayfanın kenarından ya da altından kayarak açılan, sayfayı bırakmadan ayrıntı, filtre ya da alt form gösteren panel.	Katmanlar
InfoPopover Bir etiketin ya da değerin yanında, basınca kısa bir açıklama açan küçük bilgi butonu.	Katmanlar
Popconfirm Bir düğmenin yanında açılan, hafif bir işlem öncesinde evet ya da hayır soran küçük onay paneli.	Katmanlar
Popover Bir butona bağlı açılan, etkileşimli içerik taşıyan kalıcı olmayan panel.	Katmanlar
PreviewCard Üzerine gelinince ya da odaklanınca gideceği yerin kısa önizlemesini gösteren bağlantı.	Katmanlar
Tooltip Bir öğenin yanında üzerine gelince ve klavye odağında görünen kısa açıklama.	Katmanlar
Anchor Uzun bir sayfanın bölümlerine bağlantı veren ve okunan bölümü işaretleyen sayfa içi gezinme.	Gezinme ve kabuk
AppShell Uygulama çerçevesi: daraltılabilen kenar menüsü, mobilde açılır menü, üst çubuk ve sayfa içeriği.	Gezinme ve kabuk
Breadcrumbs Geçerli sayfanın hiyerarşideki yerini gösteren, uzun yolları katlayan konum izi.	Gezinme ve kabuk
Command Gruplu komutları ve kısayolları arayıp çalıştıran palet; yerinde ya da ⌘K ile açılan pencerede.	Gezinme ve kabuk
PageHeader Sayfanın üstü: konum, başlık, durum, açıklama ve ana işlemler.	Gezinme ve kabuk
Stepper Çok adımlı bir akışta nerede olunduğunu gösteren adımlar ve Geri, İleri düğmeli WizardFooter.	Gezinme ve kabuk
Tabs Aynı bağlamın panelleri arasında geçiş yapan, hareketli göstergeli sekmeler.	Gezinme ve kabuk

Kategoriler

Kategori	İçerik
Düzen ve temel	Sayfa ve bölüm düzeni, metin, ikon, ayırıcı, açılır bölümler ve `Provider`
Eylemler	Bir işlemi başlatan kontroller: Button, menüler, araç çubukları, geçiş düğmeleri
Formlar	Veri girişi: alan yapısı, metin alanları, seçim kontrolleri
Veri gösterimi	Tablolar, kartlar, listeler, rozetler, grafikler ve onları süzen kontroller
Geri bildirim	Durum, ilerleme, yükleniyor ve sonuç bildirimleri
Katmanlar	Sayfanın üstünde açılan içerik: ipucu, açılır pencere, iletişim kutusu, çekmece
Gezinme ve kabuk	Uygulama kabuğu, sekmeler, içerik yolu, sayfa başlığı ve komut paleti

Her bileşen tek bir kategoridedir. Kategori listesi apps/docs/src/data/categories.ts dosyasındadır; kategorisi olmayan bir bileşen doküman kontrolünü durdurur.