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