Anlık pivot oluşturucu
Kullanıcılar boyutları ve ölçüleri seçer; çapraz tablo bir TFDQuery'den yeniden oluşturulur.
Canlı demoyu açın →Kitaplıktaki her bileşen, dokuz aile halinde gruplandırılmıştır. Her biri Bootstrap 5 işaretlemesine dönüşür ve Delphi, C++ Builder ile .NET'te aynı şekilde çalışır. Bileşenlerin çoğu veriye duyarlıdır; LoadFromDataSet / DataSource (ya da eşdeğer bir .NET kaynağı) aracılığıyla doğrudan bir TDataSet'e bağlanır. Kullanımı ve örnekleriyle kendi sayfası için bir bileşene tıklayın. Tüm bileşenler, otomatik HTML, öznitelik, JavaScript ve URL çıktı kodlaması ile URL temizleme uygular; böylece dinamik içerik, XSS ve enjeksiyona karşı korunmak amacıyla varsayılan olarak kaçışlanır.
14 bileşen
11 bileşen
10 bileşen
23 bileşen
10 bileşen
14 bileşen
4 bileşen
7 bileşen
8 sınıf
Veri kümelerinizi doğrudan işleyen ızgaralar, takvimler ve panolar.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Zengin özellikli tablo: sıralama, filtreleme, CSV/PDF dışa aktarma, satır içi düzenleme, gruplama, sanal kaydırma ve yapay zeka sorgusu. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Bir araç çubuğu, arama ve satır sayısıyla Grid + Pagination'ı saran üst düzey veri tablosu. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Etkinlik noktaları ve önceki/sonraki gezinme içeren aylık ızgara takvimi. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Etkinlikleri tarihe göre işleyen takvim zamanlayıcısı (ay / hafta görünümleri). | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Bir veri kümesinden yüklenebilen, tarihli etkinliklerin dikey zaman çizelgesi. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Sütunlar ve sürüklenebilir kartlardan oluşan Kanban panosu. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Görev ilerleme çubukları içeren Gantt proje zaman çizelgesi grafiği. | Docs |
| TreeGrid | TsgcHTMLComponent_TreeGrid | Id/ParentId düğüm çiftlerinden oluşturulan, daraltılabilir hiyerarşik satırlara sahip Bootstrap tablosu. | Docs |
| PivotTable | TsgcHTMLComponent_PivotTable | Satırları ve sütunları gruplandıran, satır, sütun ve genel toplamlarla ölçüleri toplayan Bootstrap pivot tablosu. | Docs |
| ActivityFeed | TsgcHTMLComponent_ActivityFeed | Göreli zaman damgaları ve bant dışı WebSocket push'u içeren, en yeniden eskiye canlı etkinlik akışı. | Docs |
| AuditTrail | TsgcHTMLComponent_AuditTrail | Aktör, eylem, hedef ve zaman damgasıyla kullanıcı ve sistem eylemlerinin kronolojik denetim günlüğü akışı. | Docs |
Kendi sayılarınızdan oluşturulan veri güdümlü görseller.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js grafiği: çizgi, çubuk, pasta, halka, radar, polar, baloncuk ve dağılım. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Düşük / orta / yüksek renk eşikleri olan yarım daire SVG göstergesi. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Satır içi SVG olarak işlenen düğüm ve ok akış şeması. | Docs |
| Map | TsgcHTMLComponent_Map | İşaretçilerle Leaflet.js etkileşimli harita (OpenStreetMap / CartoDB döşemeleri). | Docs |
| Heatmap | TsgcHTMLComponent_Heatmap | Hücre değerlerinden ya da bağlı bir veri kümesinden oluşan, gösterge ve satır/sütun etiketleri içeren renk ölçekli SVG ısı haritası ızgarası. | Docs |
| Sparkline | TsgcHTMLComponent_Sparkline | Bir değer serisinden ya da bağlı bir veri kümesinden oluşan, kompakt satır içi SVG çizgi, çubuk ya da alan mini grafiği. | Docs |
| CandlestickChart | TsgcHTMLComponent_CandlestickChart | Fitiller, yükseliş/düşüş renkleri ve isteğe bağlı bir hacim şeridi içeren SVG OHLC mum grafiği. | Docs |
| QRCode | TsgcHTMLComponent_QRCode | Herhangi bir metin ya da URL'den, seçilebilir hata düzeltme düzeyiyle saf Pascal ISO/IEC 18004 SVG QR kodu. | Docs |
| Barcode | TsgcHTMLComponent_Barcode | Herhangi bir ASCII metinden, isteğe bağlı okunabilir bir başlıkla saf Pascal Code 128 SVG barkodu. | Docs |
| TreeMap | TsgcHTMLComponent_TreeMap | Kendi kendine yeten, sunucu tarafında üretilmiş satır içi SVG olarak işlenen, herhangi bir grafik kitaplığı gerektirmeyen kare biçimli ağaç haritası (treemap). | Docs |
Doğrulama ve veri kümesi bağlamayla, veri yakalamak için ihtiyacınız olan her şey.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Doğrulama, düzenler ve yapay zeka form oluşturma içeren veri güdümlü form oluşturucu. | Docs |
| Edit | TsgcHTMLComponent_Edit | Etiket, yardım metni ve veri kümesi bağlama içeren tek satırlık metin girdisi. | Docs |
| Memo | TsgcHTMLComponent_Memo | Etiket ve yardım metni içeren çok satırlı metin alanı girdisi. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Etiket ve işaretli durum içeren onay kutusu girdisi. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Birbirini dışlayan radyo seçeneklerinden oluşan grup. | Docs |
| Select | TsgcHTMLComponent_Select | Seçenek grupları, çoklu seçim ve veri kümesi bağlama içeren açılır seçim. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Başına / sonuna eklenti metni eklenen girdi. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | HTML5 öneri datalist'i ile desteklenen metin girdisi. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Yerel tarih / saat / tarih-saat girdi alanı. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Çok parçalı form gönderimiyle sürükle bırak dosya yükleme alanı. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Gizli form alanı içeren Quill tabanlı WYSIWYG zengin metin düzenleyicisi. | Docs |
| Rating | TsgcHTMLComponent_Rating | Yıldız (simge) puanlama görüntüsü ya da girdisi. | Docs |
| MultiSelect | TsgcHTMLComponent_MultiSelect | Aranabilir, çip'ler, gruplandırılmış seçenekler ve veri kümesi bağlama içeren Bootstrap çoklu seçim açılır menüsü. | Docs |
| ColorPicker | TsgcHTMLComponent_ColorPicker | İsteğe bağlı bir hex metin alanı ve renk örneği ön ayarları içeren yerel HTML5 renk girdisi. | Docs |
| Slider | TsgcHTMLComponent_Slider | Canlı değer rozeti, min/maks etiketleri ve renk stili içeren Bootstrap aralık kaydırıcısı. | Docs |
| TimePicker | TsgcHTMLComponent_TimePicker | Min/maks sınırları ve saniye düzeyinde ayrıntı içeren yerel HTML5 saat girdisi. | Docs |
| SignaturePad | TsgcHTMLComponent_SignaturePad | Temizle, Geri Al ve Kaydet eylemleri içeren, işaretçi olaylarıyla çalışan tuval imza pedi. | Docs |
| Transfer | TsgcHTMLComponent_Transfer | Öğeleri kullanılabilir ve atanmış panel arasında taşımak için filtreleme ve veri kümesi bağlama içeren çift liste kutusu bileşeni. | Docs |
| DateTimePicker | TsgcHTMLComponent_DateTimePicker | Takvim ve saati tek bir alanda birleştiren yerel HTML5 tarih-ve-saat seçici. | Docs |
| DateRangePicker | TsgcHTMLComponent_DateRangePicker | Min/maks sınırlarıyla bir tarih aralığı seçmek için eşleştirilmiş başlangıç ve bitiş tarihi girdileri. | Docs |
| RangeSlider | TsgcHTMLComponent_RangeSlider | Canlı değer rozetleriyle bir düşük/yüksek değer çifti seçen çift tutamaçlı kaydırıcı. | Docs |
| CameraScanner | TsgcHTMLComponent_CameraScanner | Tarayıcının yerel BarcodeDetector'ıyla barkod ve QR kodu tarayan, üçüncü taraf kitaplık gerektirmeyen canlı kamera paneli. | Docs |
| NumPad | TsgcHTMLComponent_NumPad | Satış noktası girişi için hızlı tutar düğmeleri ve yerel ayardan bağımsız biçimlendirme içeren dokunmatik sayısal ve para birimi tuş takımı. | Docs |
Bir sayfayı düzenlemek için kartlar, medya ve KPI kutuları.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Üstbilgi / gövde / altbilgi içeren, daraltılabilir ve kaydırılabilir Bootstrap kart paneli. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Simge, eğilim oku ve isteğe bağlı geçişli renk içeren pano KPI / istatistik kartı. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Üst üste yığılmış genişletilebilir panellerden oluşan, dikey olarak daralan akordeon. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Göstergeler, denetimler ve otomatik oynatma içeren görüntü slayt gösterisi / karuseli. | Docs |
| Image | TsgcHTMLComponent_Image | Şekil, duyarlı / geç yükleme, ışık kutusu bağlantısı ve başlık içeren görüntü. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Boyut, şekil ve varlık durumu noktası içeren kullanıcı avatarı (görüntü ya da baş harfler). | Docs |
| Video | TsgcHTMLComponent_Video | HTML5 video / ses oynatıcısı ile bir YouTube gömme yardımcısı. | Docs |
| Badge | TsgcHTMLComponent_Badge | Renk, hap şekli, satır içi simge ve konumlandırılmış bildirim noktası modu içeren tekil Bootstrap rozeti. | Docs |
| PDFViewer | TsgcHTMLComponent_PDFViewer | pdf.js tabanlı, sayfa gezinme, yakınlaştırma, arama, indirme ve yazdırma içeren sayfa içi PDF görüntüleyici. | Docs |
| Chip | TsgcHTMLComponent_Chip | İsteğe bağlı bir simge, renk ve kaldırılabilir bir kapatma düğmesi içeren kompakt çip / etiket. | Docs |
İletişim kutuları, durum yüzeyleri ve yükleme durumları.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Başlık / gövde / altbilgi, boyutlar, ortalanmış ve sabit arka plan içeren kalıcı iletişim kutusu. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Soldan, sağdan, üstten ya da alttan kayan tuval dışı panel. | Docs |
| Popover | TsgcHTMLComponent_Popover | Bir tetikleyici öğe üzerinde açılan balon (tıklama / üzerine gelme / odak). | Docs |
| Toast | TsgcHTMLComponent_Toast | Üstbilgi, gövde, zaman damgası ve otomatik gizleme içeren toast bildirimi. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | İsteğe bağlı bir eylem içeren Material tarzı geçici snackbar. | Docs |
| Notification | TsgcHTMLComponent_Notification | Okunmamış rozeti olan zil simgeli açılır bildirim merkezi. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Boyutlandırılmış ve renklendirilmiş yükleme döndürücüsü (kenarlık / büyüme). | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Animasyonlu bir parıltı içeren iskelet / yer tutucu yükleme kartı. | Docs |
| ContextMenu | TsgcHTMLComponent_ContextMenu | Bir CSS seçiciyle kapsamlanan, simgeler, ayraçlar, başlıklar ve sunucuya yönlendirilen eylemler içeren sağ tık açılır menüsü. | Docs |
| JobProgress | TsgcHTMLComponent_JobProgress | Durum rozetleri, iptal düğmeleri ve bant dışı parça güncellemeleri içeren, arka plan iş ilerleme çubuklarının canlı listesi. | Docs |
| LogViewer | TsgcHTMLComponent_LogViewer | Düzey filtresi, arama ve otomatik kaydırma içeren akışlı günlük / terminal görüntüleyici. | Docs |
| ProgressBar | TsgcHTMLComponent_ProgressBar | Çizgili ve animasyonlu, tekli ya da yığılmış çok segmentli Bootstrap ilerleme çubuğu. | Docs |
| CommandPalette | TsgcHTMLComponent_CommandPalette | Alt dize ardından bulanık filtreleme, kategoriler ve sunucuya yönlendirilen eylemler içeren Ctrl+K / Cmd+K hızlı eylem başlatıcısı. | Docs |
| EmptyState | TsgcHTMLComponent_EmptyState | Bir ızgaranın, listenin ya da arama sonucunun hiç satırı olmadığında gösterdiği; bir simge, başlık, açıklama ve en fazla iki düğme içeren panel. | Docs |
Basit balonlardan akışlı bir yapay zeka asistanına kadar sohbet arayüzü.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Bir girdi çubuğu ve yazma göstergesi içeren kart tarzı sohbet balonu kutusu. | Docs |
| Chat | TsgcHTMLComponent_Chat | Metin / görüntü / dosya / ses / video iletileri, okundu bilgileri ve yanıtlar içeren WhatsApp tarzı sohbet. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | Sağlayıcı / model seçici, belirteç akışı ve RAG kaynak alıntıları içeren yapay zeka asistanı sohbeti. | Docs |
| Presence | TsgcHTMLComponent_Presence | Canlı durum güncellemeleriyle, avatar yığını ya da liste olarak "Kimler çevrimiçi" listesi. | Docs |
Parolalardan geçiş anahtarlarına kadar hazır oturum açma akışları.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Beni hatırla ve uyarılar içeren hazır oturum açma formu / sayfası (kart, ortalanmış ya da tam sayfa). | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth sosyal oturum açma düğmesi paneli (Google, Facebook, Apple, GitHub, Microsoft ve daha fazlası). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | Otomatik yönlendirmeyle başarı, hata ya da yükleme durumunda OAuth geri çağırma / açılış sayfası. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Parolasız geçiş anahtarı / WebAuthn oturum açma ve kayıt bileşeni. | Docs |
| RolesPermissions | TsgcHTMLComponent_RolesPermissions | Her hücrede bir onay kutusu ve canlı WebSocket izin güncellemeleri içeren rol / izin matrisi. | Docs |
| UserManagement | TsgcHTMLComponent_UserManagement | Roller, durum, arama ve satır başına eylemler açılır menüsü içeren kullanıcı yönetim tablosu. | Docs |
| ImpersonateBanner | TsgcHTMLComponent_ImpersonateBanner | Başka bir kullanıcı olarak hareket ederken gösterilen, tek tıkla çıkış içeren yönetici kimliğine bürünme afişi. | Docs |
Sayfaları sunan ve canlı tutan görsel olmayan parçalar.
| Bileşen | Sınıf | Açıklama | Yardım |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | İşlenmiş sayfaları ve gömülü kaynakları sunan, bir TsgcWebSocketHTTPServer'a bağlı HTML motoru. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | Aynı sunucuya bağlı htmx motoru. HTTP ve WebSocket işleyicilerine bağlanır, gelen istekleri ve iletileri sevk eder ve bağlı tarayıcılara gerçek zamanlı olarak HTML parçaları gönderir ya da yayınlar (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Kayıtlı bileşenleri eksiksiz, duyarlı bir sayfaya birleştirir (tasarım zamanı görsel düzenleyiciyle). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Gövde içeriğini tema, dil ve yön içeren tam bir Bootstrap 5 HTML belgesine sarar. | Docs |
| ThemeController | TsgcHTMLThemeController | Theme özelliği (ptDefault, ptDark, ptDarkPro) seçilen temayı ve paylaşılan stil sayfasını sayfaya uygulayan çalışma zamanı tema değiştirici. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | Mode özelliği (tmLight, tmDark, tmSystem) özellik değerlerinden Bootstrap CSS değişkenleri yazan CSS oluşturucu; tmSystem için isteğe bağlı bir işletim sistemi tercihi eşitleme betiğiyle birlikte. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Sunucudan tarayıcıya kısmi sayfa güncellemesi göndermek için bant dışı htmx parçası. | Docs |
| HTMXRouter | TsgcHTMX_Router | Gelen bir istek yolunu eşleştiren ve onu (HandleRequest aracılığıyla) o rotanın OnRoute işleyicisine sevk eden Routes yönlendirme tablosu. | Docs |
Bu sayfada listelenen her yetenek, bu uygulamalardan birinde gerçekten çalışıyor.
Kullanıcılar boyutları ve ölçüleri seçer; çapraz tablo bir TFDQuery'den yeniden oluşturulur.
Canlı demoyu açın →
Yazdıkça arama ve satır içi düzenleme, sayfa yenilemesi olmadan parçalar olarak yerleşir.
Canlı demoyu açın →
Aynı bileşenler, telefon genişliğinde elde taşınan okuyucu düzenini işler.
Canlı demoyu açın →