Jede Komponente der Bibliothek, gruppiert in neun Familien. Jede rendert zu Bootstrap-5-Markup und funktioniert in Delphi, C++ Builder und .NET gleich. Klicken Sie auf eine Komponente für ihre eigene Seite mit Verwendung und Beispielen. Alle Komponenten wenden automatische HTML-, Attribut-, JavaScript- und URL-Ausgabekodierung sowie URL-Bereinigung an, sodass dynamischer Inhalt standardmäßig maskiert wird, um vor XSS und Injection zu schützen.
13 Komponenten
7 Komponenten
4 Komponenten
12 Komponenten
7 Komponenten
8 Komponenten
3 Komponenten
4 Komponenten
8 Klassen
Grids, Kalender und Boards, die Ihre Datasets direkt rendern.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Funktionsreiche Tabelle: Sortieren, Filtern, CSV-/PDF-Export, Inline-Bearbeitung, Gruppierung, virtuelles Scrollen und KI-Abfrage. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Übergeordnete Datentabelle, die Grid + Pagination mit Toolbar, Suche und Zeilenanzahl umschließt. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Kalender im Monatsraster mit Ereignispunkten und Vor-/Zurück-Navigation. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Kalenderplaner (Monats-/Wochenansicht), der Ereignisse nach Datum rendert. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Vertikale Zeitleiste aus datierten Ereignissen, aus einem Dataset ladbar. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Kanban-Board aus Spalten und ziehbaren Karten. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Gantt-Projektzeitplandiagramm mit Aufgabenfortschrittsbalken. | Docs |
Datengetriebene Grafiken, aus Ihren eigenen Zahlen erstellt.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js-Diagramm: Linie, Balken, Kreis, Donut, Radar, Polar, Blase und Streuung. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Halbkreisförmiges SVG-Messgerät mit Niedrig-/Mittel-/Hoch-Farbschwellen. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Knoten-und-Pfeil-Flussdiagramm, als Inline-SVG gerendert. | Docs |
| Map | TsgcHTMLComponent_Map | Interaktive Leaflet.js-Karte (OpenStreetMap-/CartoDB-Kacheln) mit Markern. | Docs |
Alles, was Sie zum Erfassen von Daten brauchen, mit Validierung und Dataset-Bindung.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Datengetriebener Formular-Builder mit Validierung, Layouts und KI-Formularerzeugung. | Docs |
| Edit | TsgcHTMLComponent_Edit | Einzeiliges Texteingabefeld mit Label, Hilfetext und Dataset-Bindung. | Docs |
| Memo | TsgcHTMLComponent_Memo | Mehrzeiliges Textbereich-Eingabefeld mit Label und Hilfetext. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Kontrollkästchen-Eingabe mit Label und Aktiviert-Zustand. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Gruppe sich gegenseitig ausschließender Radio-Optionen. | Docs |
| Select | TsgcHTMLComponent_Select | Auswahl-Dropdown mit Optionsgruppen, Mehrfachauswahl und Dataset-Bindung. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Eingabe mit vorangestelltem/nachgestelltem Addon-Text. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Texteingabe mit einer HTML5-Datalist aus Vorschlägen. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Natives Datums-/Zeit-/Datum-Zeit-Eingabefeld. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Drag-and-Drop-Datei-Upload-Zone mit Multipart-Formular-POST. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Quill-basierter WYSIWYG-Rich-Text-Editor mit verborgenem Formularfeld. | Docs |
| Rating | TsgcHTMLComponent_Rating | Stern- (Symbol-)Bewertungsanzeige oder -eingabe. | Docs |
Karten, Medien und KPI-Kacheln zum Layout einer Seite.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap-Card-Panel mit Kopfzeile/Inhalt/Fußzeile, einklappbar und scrollbar. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Dashboard-KPI-/Statistik-Karte mit Icon, Trendpfeil und optionalem Verlauf. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Vertikal einklappbares Accordion aus gestapelten ausklappbaren Panels. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Bilder-Diashow/-Karussell mit Indikatoren, Steuerelementen und automatischer Wiedergabe. | Docs |
| Image | TsgcHTMLComponent_Image | Bild mit Form, responsiv/Lazy-Load, Lightbox-Link und Bildunterschrift. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Benutzer-Avatar (Bild oder Initialen) mit Größe, Form und Präsenzstatus-Punkt. | Docs |
| Video | TsgcHTMLComponent_Video | HTML5-Video-/Audioplayer plus ein YouTube-Einbettungshelfer. | Docs |
Dialoge, Statusflächen und Ladezustände.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modal-Dialog mit Titel/Inhalt/Fußzeile, Größen, zentriert und statischem Hintergrund. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Off-Canvas-Slide-in-Panel von links, rechts, oben oder unten. | Docs |
| Popover | TsgcHTMLComponent_Popover | Popover-Sprechblase an einem Trigger-Element (Klick/Hover/Fokus). | Docs |
| Toast | TsgcHTMLComponent_Toast | Toast-Benachrichtigung mit Kopfzeile, Inhalt, Zeitstempel und Auto-Ausblenden. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Kurzlebige Snackbar im Material-Stil mit einer optionalen Aktion. | Docs |
| Notification | TsgcHTMLComponent_Notification | Glocken-Symbol-Dropdown als Benachrichtigungszentrale mit Ungelesen-Abzeichen. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Lade-Spinner (Rahmen/Grow), dimensioniert und eingefärbt. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Skelett-/Platzhalter-Ladekarte mit einem animierten Schimmer. | Docs |
Konversationelle Oberflächen, von einfachen Sprechblasen bis zu einem streamenden KI-Assistenten.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Kartenförmige Chat-Sprechblasen-Box mit Eingabeleiste und Tipp-Indikator. | Docs |
| Chat | TsgcHTMLComponent_Chat | Chat im WhatsApp-Stil mit Text-/Bild-/Datei-/Audio-/Videonachrichten, Lesebestätigungen und Antworten. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | KI-Assistenten-Chat mit Provider-/Modellauswahl, Token-Streaming und RAG-Quellenangaben. | Docs |
Fertige Anmeldeabläufe, von Passwörtern bis zu Passkeys.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Fertiges Anmeldeformular/-seite (Karte, zentriert oder ganzseitig) mit Angemeldet-bleiben und Hinweisen. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth-Social-Login-Schaltflächenpanel (Google, Facebook, Apple, GitHub, Microsoft und mehr). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth-Callback-/Landing-Seite im Erfolgs-, Fehler- oder Ladezustand mit automatischer Weiterleitung. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Passwortloses Passkey-/WebAuthn-Widget zum Anmelden und Registrieren. | Docs |
Die nicht-visuellen Bausteine, die die Seiten ausliefern und live halten.
| Komponente | Klasse | Beschreibung | Hilfe |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | HTML-Engine, gebunden an einen TsgcWebSocketHTTPServer, der gerenderte Seiten und eingebettete Assets ausliefert. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | htmx-Engine, an denselben Server angebunden. Sie hängt sich in die HTTP- und WebSocket-Handler ein, verteilt eingehende Anfragen und Nachrichten und sendet oder broadcastet HTML-Fragmente in Echtzeit an verbundene Browser (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Setzt registrierte Komponenten zu einer vollständigen responsiven Seite zusammen (mit einem visuellen Editor zur Entwurfszeit). | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Umschließt Inhalt in einem vollständigen Bootstrap-5-HTML-Dokument mit Thema, Sprache und Schreibrichtung. | Docs |
| ThemeController | TsgcHTMLThemeController | Laufzeit-Theme-Umschalter, dessen Eigenschaft Theme (ptDefault, ptDark, ptDarkPro) das ausgewählte Theme und das gemeinsame Stylesheet auf die Seite anwendet. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | CSS-Generator, dessen Mode (tmLight, tmDark, tmSystem) Bootstrap-CSS-Variablen aus Eigenschaftswerten schreibt, mit einem optionalen Skript zur Synchronisierung mit der Betriebssystem-Einstellung für tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Out-of-Band-htmx-Fragment zum Übertragen eines Teilseiten-Updates vom Server an den Browser. | Docs |
| HTMXRouter | TsgcHTMX_Router | Routing-Tabelle aus Routes, die einen eingehenden Anfragepfad abgleicht und ihn (über HandleRequest) an den OnRoute-Handler dieser Route weiterleitet. | Docs |