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. 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.
13 bileşen
7 bileşen
4 bileşen
12 bileşen
7 bileşen
8 bileşen
3 bileşen
4 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 |
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 |
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 |
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 |
İ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 |
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 |
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 |
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 |