Bileşenler

Pantrix UI'ın 100 bileşeni grup grup; her biri canlı örnekleri, API'si ve her platformdaki stilleriyle.

Öğeler

• Button: Metin etiketli düğme: düğmelerin çoğu bu biçimdedir.
• Icon Button: Yalnızca bir ikon gösteren düğme: karedir, size boyutundaki bir düğme kadar yüksektir, varsayılan olarak yuvarlaktır ve çevresinde platformun en küçük dokunma hedefi kadar yer ayrılır. Renklerini variant seçer. Varsayılan olan ButtonVariant.Text'in, devre dışı olsun olmasın, dolgusu yoktur. contentDescription ekran okuyucu için işi adlandırır: "X" değil, "Kapat".
• Button Group: Bir düğme grubu: aynı önemde birkaç eylem, tek bir kontrol olarak çizilmiş ya da aralarında aynı boşlukla ayrı duran.
• Link: onClick'i çalıştıran, tek başına duran bir bağlantı: text primary renginde ve altı çizili yazılır, çevresinde platformun en küçük dokunma hedefi vardır. Tıklama temanın analitiğine bir Link click olayı olarak bildirilir. enabled değilken hiçbir şey yapmaz. Alt çizgisi devre dışı yazı renginde kalır ki yine bir bağlantı olarak okunsun.
• Text: Temanın yazı ölçeğinde bir metin. style verilmezse temel yazıdır, LocalPantrixTextStyle: label stili ya da ekranın çevresindeki bölümünün verdiği. role ekran okuyucuya metnin ne olduğunu söyler: bir başlık, bir etiket ya da süs. selectable ile kullanıcı metni seçer ve kopyalar.
• Auto Text: Görünür kalmak için küçülen metin: kendisine verilen yerde bütünüyle okunan bir tutar, bir başlık ya da bir ad.
• Icon: Bir ikon: kenarı size olan bir karedir ve tek renkle çizilir. Bu renk tint'tir, o verilmezse ikonun durduğu yerin içerik rengidir, örneğin bir düğmenin etiket rengi. contentDescription ekran okuyucu için ikonun adıdır. Yanındaki bir etiket ne anlama geldiğini zaten söylüyorsa null verilir ve ikon ekran okuyucudan gizlenir.
• Image: Bir resim: bir fotoğraf, bir çizim, bir logo. PantrixIcon'dan farklı olarak, colorFilter değiştirmedikçe kendi renklerini korur. contentDescription resmi ekran okuyucuya anlatır. Süs olan bir resimde null bırakılır ve resim ekran okuyucudan gizlenir.
• Avatar: Bir kişinin ya da bir şeyin resmi: bir fotoğraf, bir adın baş harfleri ya da ikisinin yerini tutan bir ikon.
• Badge: Bir sayı ya da bir durum noktası. Çoğunlukla PantrixBadgedBox ile başka bir öğenin üstüne konur.
• Badged Box: badge'i content'in üstüne, ortası bir köşesine gelecek şekilde koyar ve rozet için yer ayırmaz.
• Chip: Bir çip: küçük bir eylem, ya da kullanıcının eklediği ve geri çıkarabildiği bir öğe, örneğin bir alıcı, bir etiket ya da uygulanmış bir süzgeç.
• Divider: İçeriği ayıran bir çizgi: orientation'a göre bir PantrixHorizontalDivider ya da bir PantrixVerticalDivider.
• Spinner: Bir işin sürdüğünü söyleyen, dönen bir yay. Karedir: bir kenarı size kadardır. Sistem hareketin azaltılmasını istediğinde yerinde durur. color ile verilen renkte çizilir. Renk verilmezse, dolu bir düğmede olduğu gibi, bulunduğu yerin içerik rengini alır. O da yoksa primary rengindedir: temanın kendi zeminleri içerik rengi vermez, bu yüzden sayfada, bir yüzeyde ve bir kartta markanın rengindedir. contentDescription ekran okuyuculara araya girmeyen bir canlı bölge olarak ulaşır. Yüklendiğini zaten söyleyen bir şeyin içinde null verilir.
• Skeleton: Yüklenmesi süren içeriğin yer tutucusu: shape şeklinde bir blok ve üstünden geçen açık bir bant. Sistem hareketin azaltılmasını istediğinde bant durur. Boyutu modifier ile verilir. colors, temanın renklerini almayan bloğun kendi renkleridir. Ekran okuyucu contentDescription'ı okur: varsayılanı temanın "yükleniyor" metnidir. Yüklendiğini onu saran bir öğe zaten duyuruyorsa null verilir. tagKey otomasyon anahtarıdır: blok Skeleton_<tagKey>'dır ve bir test içeriğin geldiğini onun gitmesinden anlar. Anahtar yoksa etiketi olmaz.
• Skeleton Text: Bir paragrafın yer tutucusu: her biri lineHeight yüksekliğinde, lines kadar iskelet satırı. Sonuncusu daha kısadır. Satırlar temanın renklerini almıyorsa her biri colors ile verilen renklerdedir. Sütun, hepsi için tek bir contentDescription taşır.
• Checkbox: Bir onay kutusu: işaretli ya da boş bir kutu ve o kutunun etiketi.
• Tri-state Checkbox: Üçüncü bir durumu olan onay kutusu: işaretli, boş ya da ikisinden de biraz.
• Radio Button: Bir radyo düğmesi: seçili ya da seçili olmayan bir halka ve o halkanın etiketi. Biri seçilen birkaç seçenekten biridir.
• Radio Group: Bir radyo düğmeleri grubu: options arasından birinin seçimi. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı durur.
• Switch Button: Bir anahtar: açık ya da kapalı olan ve hemen uygulanan bir ayar ile neyin anahtarı olduğunu söyleyen etiketi.
• Segment Button: Bir segment düğmesi: tek bir kontrolde yan yana duran birkaç seçenek, biri seçili.
• File Drop: Uygulamaya dosya verilen yer: basılınca platformun seçicisini açan, üstüne platformun dosyalarından, başka bir uygulamadan ya da başka bir pencereden bırakılan dosyaları alan, kesik kenarlı bir bölge.
• File Item: Uygulamanın aldığı bir dosya, bir satırda: ikonu, adı, boyutu ya da onunla ilgili neyin yanlış gittiği, ne kadarının gönderildiği ve onu kaldıran düğme. Satırlar bir PantrixFileDrop'un altında, her biri uygulamanın tuttuğu bir dosya için durur.

Girdiler

• Text Field: Metin alanı: kullanıcının yazdığı tek ya da birkaç satırlık metin. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı, iki ucunda ikonlar, onu temizleyen bir düğme ve karakterlerinin sayacıyla birlikte gelir.
• Filled Text Field: Etiketi kutusunun içinde duran metin alanı: etiket yazının geleceği yerde durur, alan odağı aldığında ya da bir metin tuttuğunda yazının üstündeki kendi satırına çıkar.
• Secure Text Field: Omuz üstünden okunmaması gerekenler için metin alanı: bir şifre, bir PIN, bir kartın güvenlik kodu.
• Filled Secure Text Field: Etiketi kutusunun içinde duran güvenli metin alanı: bir şifre, bir PIN ya da bir kartın güvenlik kodu, PantrixFilledTextField'ın dolgulu kutusunda.
• Auto-resize Text Field: Yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey.
• Filled Auto-resize Text Field: Etiketi kutusunun içinde duran ve yazısı görünür kalmak için küçülen metin alanı: bir tutar, bir kart numarası, kısa bir not, bütünü okunan her şey, PantrixFilledTextField'ın dolgulu kutusunda.
• Text Area: Metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Yazıldıkça uzar, sonra kayar. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı ve karakterlerinin sayacıyla birlikte gelir.
• Filled Text Area: Dolgulu metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Dolgulu kutusu yazıldıkça uzar, sonra kayar. Etiketi kutunun içindedir; altında yardım metni ya da bir hatanın mesajı ve karakterlerinin sayacıyla birlikte gelir.

Tarih ve saat

• Date Picker: Ay ay gezilen ve bir gün seçtiren bir takvim: ayın başlığı ve iki yanında ayı çeviren oklar, sütunların üstünde haftanın günleri, bir de ayın günleri.
• Date Text Field: Bir gün için metin alanı: gün rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı takvimden seçilir.
• Date Filled Text Field: Bir gün için dolu bir metin alanı: gün rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı takvimden seçilir. Dolu bir kutudaki PantrixDateTextField'tır.
• Time Picker: Sütunlardan seçilen bir saat: saatler, dakikalar ve 12 saatlik bir saatte günün yarısı; her biri beş satır gösteren, kalanına kayan bir sütun, seçili değer ortasında dolgulu.
• Time Text Field: Günün bir saati için bir metin alanı: saat rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı bir saat seçiciden seçilir.
• Time Filled Text Field: Günün bir saati için dolu bir metin alanı: saat rakamlarla yazılır ya da kutunun sonundaki bir düğmenin açtığı bir saat seçiciden seçilir. Dolu bir kutudaki PantrixTimeTextField'dır.
• Elastic Date Picker: Saatle birlikte kayabilen bir zaman aralığı; bir pano onunla süzülür: "son 15 dakika" bir sonraki yenilemede yine son 15 dakikadır. Elastic UI'ın EuiSuperDatePicker'ı, Pantrix üzerinde yeniden.

Kapsayıcılar

• Card: Tek bir konuyu toplayan kapsayıcı: kendi yüzeyinde bir başlık, bir gövde ve eylemler, üstlerinde kenardan kenara duran bir görsel.
• Card Skeleton: İçeriği henüz gelmemiş bir PantrixCard: kartın kendi yüzeyi, başlığının, gövdesinin ve eylemlerinin geleceği yerde çubuklarla.
• Surface: color rengini shape şeklinin içine boyayan ve içeriğini o şekle kırpan bir kapsayıcı. İstenirse border ile 1dp'lik bir kenarı, elevation ile bir gölgesi olur.
• Scaffold: Bir ekranın düzeni: içeriğin çevresinde bir üst bar, bir alt bar ve bir yan bar, içeriğin üstünde uygulamanın snackbar'ları.
• Page Scaffold: Bir uygulamanın kabuğunun içindeki bir ekran: başında başlığı ve yapabildikleri, altında gösterdiği; kabuğun bar'larından, klavyeden ve pencerenin kenarlarından uzakta. Bir uygulama kabuğunu bir kez bir PantrixScaffold ile kurar, gezinmesi dar pencerede altta, geniş pencerede yanda; her ekranını bununla.
• Showcase Scaffold: Uygulamanın kabuğunun dışında duran bir ekran: giriş, kayıt, şifre sıfırlama, bir davet, bir karşılama, bulunamayan bir sayfa. Bir yanda vitrin durur, bir resim, bir söz ya da slaytlar; öbür yanda form. Dar bir yerde yalnızca form kalır.
• Accordion: İçeriği başlığının altında açılıp kapanan bölümler: uzun bir sayfa böylece parça parça okunur.
• Tabs: Aynı içeriğin görünümleri arasında geçen bir sekme satırı: biri seçilidir ve bir işaret, bir sonraki seçilene kayar.
• Back Button: Bir PantrixTopBar'ın gezinme ikonu için, önceki ekrana dönen düğme: ekran okuyucunun temanın dilinde "Geri" dediği bir ikon düğmesi.
• Top Bar: Ekranın üstündeki bar: ekranın başlığı, önünde bir gezinme ikonu ve arkasında eylemler.
• Alert: Kullanıcının o an yaptığı işle ilgili bir mesaj; ilgili olduğu şeyin yanında gösterilir: az önce gönderilen form, silinmek üzere olan satır, bir kez daha bakılması gereken tek alan.
• Two Pane: Aynı yerde iki panel: yan yana ya da alt alta. Pencerenin bir kat yeri bu yeri ayırıyorsa oradan bölünür.
• List Detail Scaffold: Bir liste ve içinde açılan öğenin ayrıntısı: yerde ikisine yer varsa yan yana, yoksa ayrıntı listenin yerinde; ayrıca ayrıntının yanında ya da üstünde, scaffold'un kendi yan sheet'inde ekstra bir panel.
• Supporting Pane Scaffold: Bir ekranın ana içeriği ve onu destekleyen bir panel: bir belge ve yorumları, bir grafik ve filtreleri, bir harita ve sonuçları. Yerde ikisine de yer varsa yan yana; yoksa ana içeriğin üstünde ya da yerinde.
• Tabletop Layout: Bakılan bir içerik ve dokunulan denetimler, bir katlanabilirin nasıl tutulduğuna göre yerleştirilir: bir masada, menteşe yatay ve yarı açıkken içerik kat yerinin üstündeki yarıyı, denetimler ellerin olduğu alttaki yarıyı doldurur; kitap gibi tutulunca ikisi kat yerinin iki yanında durur; katlanmayan bir ekranda denetimler, flatControls'ın dediği gibi içeriğin altında ya da üstündedir. Bir video ve oynatıcısının düğmeleri, görüntülü bir görüşme ve düğmeleri, bir kameranın görüntüsü ve deklanşörü.

Gezinme

• Breadcrumb: Ekrandaki sayfanın üstündeki sayfaların izi: her biri oraya dönen bir bağlantıdır ve iz ekrandaki sayfayla biter.
• Navigation Bar: Uygulamanın üst düzey hedefleri, ekranın alt kenarında: üç ile beş hedef, uygulamanın bulunduğu hedef işaretli olarak.
• Navigation Rail: Uygulamanın üst düzey hedefleri, geniş bir pencerenin başlangıç kenarında alt alta, uygulamanın bulunduğu hedef işaretli olarak: tablette, açık bir katlanır telefonda ya da bir masaüstü penceresinde navigation bar'ın yerini tutar.
• Sidebar: Bir uygulamanın yanındaki, uygulamanın bölümlerini de tutan hedefler sütunu.

Katmanlar

• Select: Kontrolün açtığı bir listeden tek bir seçim: bir ülke, bir para birimi, bir plan.
• Multi Select: Kontrolün açtığı bir listeden birden çok seçim: bir sayfanın daraltıldığı projeler, bir dükkânın açık olduğu günler.
• Dialog: Kullanıcı onunla ilgilenene kadar uygulamayı durduran bir karar ya da mesaj.
• Modal: Uygulamanın kendi modal katmanı: bütün pencerenin üstünde bir perde ve onun üstünde, Pantrix'in bir modalının yaptığı her şeyle, uygulamanın çizdiği içerik. PantrixDialog'un ve PantrixCommandPalette'in üstünde durduğu katmandır; ikisinin de çizmediği bir katman için: kendi süzgeçleri olan bir arama, büyük gösterilen bir resim, bir telefonu dolduran bir düzenleyici.
• Sheet: O anki ekrana ait kısa bir iş için uygulamanın üstüne açılan panel: nasıl sıralanacağını, nerede paylaşılacağını seçmek, bir iki alan, içinden seçilecek bir liste, basılan şeyin ayrıntıları.
• Menu: Bir öğenin eylemlerini o öğenin yanındaki bir panelde listeler: bir "daha fazla" düğmesinin açtığı liste ya da bir satırın eylemleri.
• Popover: Bir öğenin yanında duran ve o öğe hakkında, öğenin kendisinin gösterebileceğinden fazlasını taşıyan katman: bir durumun ne anlama geldiği, bir alanın ne beklediği, bir satır için birkaç kontrol.
• Tooltip: Çapalandığı kontrolün adını gösteren kısa bir etiket: bir ikon düğmesinin adı, kesilen bir etiketin tamamı.
• Snackbar: state'in snackbar'larını ekrana teker teker getirir: uygulamanın az önce yaptığı şeyi söyleyen kısa mesajlar, her biri en fazla bir eylemle ve nötr, birincil ya da anlam taşıyan bir tonda.
• Command Palette: Uygulamanın her komutu, adıyla bulunur ve klavyeden çalıştırılır: Cmd+K ya da Ctrl+K'nın açtığı.
• Diagnostics Inspector: Bir uygulamanın üstünde, temasının tanılamasının bulduğunu gösterir: bulguların sayısıyla bir düğme ve basınca onları listeleyen bir sheet; her bulgu denetimiyle, bulunduğu yerle ve onu neyin düzelttiğiyle. Listede seçilen bir bulgu, ekrana bir sonraki basışa kadar düğümünün durduğu yerde çerçevelenir. Hiçbir şey bulunmamışken hiçbir şey gösterilmez.

Veri

• Carousel: Yan yana duran slaytlar, biri ekranda: resimler, kartlar, bir tanıtımın adımları. Kaydırmak onları çevirir. Altındakiler carousel'in nerede olduğunu söyler ve ekrana dokunamayan okuyucu için slaytları çevirir.
• Code Block: Okunmak için dizilmiş kod: temanın kod yazısıyla, her satır kendi satırında, her parçası ne olduğunun renginde ve kopyalanmaya hazır.
• Data Table: Kayıtları satır satır, değerlerini kolon kolon gösterir: satırları sıralayan bir başlık, onları seçtiren kutular, açılan satırlar, ötekiler kayarken yerinde duran kolonlar ve tabloya yer olmayan yerde kayıtların listesi.
• JSON View: Okunmak için dizilmiş bir JSON metni: her satırda bir değer, her düzey kendisini tutandan içeride, her tür değer kendi renginde. Her nesne ve her dizi ilk satırının arkasına katlanır.
• List Item: Bir listenin satırı: bir başlık, onu başlatan ve bitiren şeyle ve altında bir iki satırla; mesajların, ayarların ya da sonuçların bir listesindeki gibi.
• Page Jump: Uzun bir listenin bir sayfasına numarasıyla götürür: "Sayfaya git" sözleri ve yanında numaranın yazıldığı kısa bir alan.
• Page Size: Bir listenin bir sayfasında kaç satır gösterileceğini seçtirir: "Sayfa başına" sözleri ve yanında boyların select'i.
• Pagination: Uzun bir listenin ya da bir tablonun sayfaları arasında gezdirir.
• Tree View: Dalları açılıp kapanan bir hiyerarşi: klasörler ve dosyalar, kategoriler, bir belgenin başlıkları.
• Tag: Bir verinin üstündeki kısa bir etiket: bir durum, bir kategori, bir sürüm.

Grafikler

• Chart: Bir dizi yer boyunca değerlerin grafiği: her serinin her yerdeki değerinden geçen çizgiler ve dolgulu alanlar, o değerlere çıkan çubuklar, altlarında yerlerin, yanlarında değerlerin ekseniyle.
• Line Chart: Bir kez verilen satırlardan bir çizgi grafiği: onlardan okunan values'ın her biri için bir çizgi, x'in onlardan okuduğu yerler boyunca.
• Area Chart: Bir kez verilen satırlardan bir alan grafiği: onlardan okunan values'ın her biri için bir çizgi, çizgiyle sıfırın arası doldurularak.
• Range Chart: Her yerde iki değerin arasında kalanın grafiği: bir günün en soğuğu ve en sıcağı, bir fiyatın gördüğü en az ve en çok, bir vardiyanın başladığı ve bittiği saatler.
• Bar Chart: Bir kez verilen satırlardan bir çubuk grafiği: satırların adını verdiği her yerde, onlardan okunan values'ın her biri için bir çubuk; yan yana, ya da stacked ise üst üste.
• Waterfall Chart: Bir şelale grafiği: bir miktarın adım adım nasıl oluştuğu. Her çubuk bir öncekinin bittiği yerden başlar; satırın eklediği kadar yukarı, götürdüğü kadar aşağı gider. Bir toplam sıfırın üstünde durur ve kendinden önceki adımların vardığı yeri gösterir.
• Candlestick Chart: Bir mum grafiği: her yerde bir şeyin neyle açıldığı ve neyle kapandığı, bir de ikisinin arasında vardığı en yüksek ve en düşük değer; bir fiyatın bir işlem gününde yaptığı gibi.
• Pie Chart: Bir pasta grafiği: bir bütünün parçaları, bir dairenin dilimleri olarak; her biri, değerinin toplamdaki payı kadar dönüş tutar. Ortasında bir hole olunca bir halkadır: oyuğunda bir toplam ya da bir başlık için yer vardır.
• Gauge: Bir gösterge: bir ölçekte tek bir değer, bir yayın ne kadarını dolandığıyla. Bir hız, bir yük, bir kotanın payı: olabileceği en aza ve en çoğa göre okunan bir değer.
• Progress Circle: Bir iş yapıldıkça dolan bir halka: bir yüklemenin ne kadarının gittiği, bir kurulumun kaç adımının geride kaldığı, bir kotanın ne kadarının kullanıldığı. Bilinen bir bütünün payını gösterir; sonu bilinmeyen iş için spinner vardır.
• Meter Group: Bir ölçüm grubu: bir bütünün birkaç miktarı, tek bir çubukta yan yana. Bir depolamanın neyle dolduğu, bir bütçenin nasıl harcandığı: parçalar birbirine ve kalana göre okunur.
• Status Tracker: Bir durum izleyici: bir dizi adım, bir sıra blok olarak; her blok, o adımda olanın renginde. Bir hizmetin ayakta olduğu günler, geçen derlemeler: kötü olanların nerede olduğu bir bakışta görülür, hangileri olduğu gösterilerek okunur.
• Sparkline: Bir sparkline: bir sayının gidişi, bir sözcüğün yerinde; ait olduğu sayının yanında. Ekseni, lejantı ve gösterilecek bir şeyi yoktur: sayının ne yöne gittiğini gösterir, gerisini bir grafik gösterir.
• Scatter Chart: Bir saçılım grafiği: iki değere göre dizilmiş noktalar, biri grafik boyunca, öteki yukarı doğru; ikisinin birlikte nasıl gittiğini gösterir. Her noktanın büyüklüğü için üçüncü bir değerle bir balon grafiği olur.
• Radar Chart: Bir radar grafiği: bir şeyin birkaç ölçüsü bir ortanın çevresindeki kollara dizilir ve bir ağ olarak birleştirilir; böylece biçimi bir bakışta okunur ve iki şey biçimleriyle ayrılır. İki kişinin becerileri, bir ürün ile rakibi, bu yıl ile geçen yıl.
• Polar Chart: Bir polar grafik: bir ortanın çevresine dizilmiş çubuklar, her biri ortadan dışarı değeri kadar uzun: bir gül. Dönüp gelen şeylere yakışır, günün saatleri, yılın ayları, pusulanın yönleri; ve hangisinin ne kadar uzandığı bir bakışta karşılaştırılacak olana.
• Heatmap: Bir ısı haritası: hücrelerden bir ızgara, her hücre değerinin ne kadar olduğunu söyleyen bir tonda. İki adı ve bir sayısı olan şeye yakışır: haftanın günlerinin saatleri, birkaç yılın ayları, bir listenin ötekiyle karşılaştırılması. Neyin çok, neyin az olduğu bir bakışta görülür; aynı sayıların tablosunu ise okumak gerekir.
• Treemap: Bir ağaç haritası: karolara bölünmüş bir kutu, her karo değerinin bütüne oranı kadar büyük. Çok parçalı bir bütüne yakışır; bir pastanın okunamayacak kadar çok dilimi olacağı yerde: bir diskin klasörleri, kalemleriyle bir bütçe, şirketleriyle bir pazar. Büyük olan hemen görülür, küçük parçaların da yeri vardır.
• Funnel Chart: Bir huni: gittikçe daha azının geçtiği bir şeyin aşamaları, alt alta, her biri ona ulaşanların sayısı kadar geniş. Ötekilerin nerede kaybedildiğini gösterir: üye olan ziyaretçiler, deneyen üyeler, ödeyen deneyenler.
• Sankey Chart: Bir sankey grafiği: neyin nereden nereye, ne kadar aktığı. Düğümler kolonlarda durur; aralarında, akan miktar kadar geniş bantlar olarak akışlar uzanır: bir sitenin ziyaretçilerinin nereden gelip neye devam ettiği, bir bütçenin neyden oluşup neye harcandığı, bir santralin enerjisinin nereye vardığı.
• Gantt Chart: Bir Gantt grafiği: bir planın görevleri, her biri bir satırda, her biri tek bir zaman ekseni boyunca başladığı andan bittiği ana uzanan bir çubuk. Neyin ne zaman yürüdüğünü, nelerin üst üste geldiğini ve her görevin nereye vardığını gösterir.