Elk component in de bibliotheek, gegroepeerd in negen families. Elk component rendert naar Bootstrap 5-markup en werkt op dezelfde manier in Delphi, C++ Builder en .NET. Klik op een component voor zijn eigen pagina met gebruik en voorbeelden. Alle componenten passen automatische HTML-, attribuut-, JavaScript- en URL-uitvoercodering plus URL-sanering toe, zodat dynamische content standaard wordt ge-escaped ter bescherming tegen XSS en injectie.
13 componenten
7 componenten
4 componenten
12 componenten
7 componenten
8 componenten
3 componenten
4 componenten
8 klassen
Grids, kalenders en boards die je datasets rechtstreeks renderen.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Grid | TsgcHTMLComponent_Grid | Functierijke tabel: sorteren, filteren, CSV/PDF-export, inline bewerken, groeperen, virtueel scrollen en AI-query. | Docs |
| DataTable | TsgcHTMLComponent_DataTable | Datatabel op hoger niveau die Grid + Pagination omhult met een werkbalk, zoeken en rijtelling. | Docs |
| Calendar | TsgcHTMLComponent_Calendar | Maandrasterkalender met gebeurtenisstippen en vorige/volgende navigatie. | Docs |
| Scheduler | TsgcHTMLComponent_Scheduler | Kalenderplanner (maand- / weekweergaven) die gebeurtenissen per datum rendert. | Docs |
| Timeline | TsgcHTMLComponent_Timeline | Verticale tijdlijn van gedateerde gebeurtenissen, te laden vanuit een dataset. | Docs |
| KanbanBoard | TsgcHTMLComponent_KanbanBoard | Kanban-board met kolommen en versleepbare kaarten. | Docs |
| Gantt | TsgcHTMLComponent_Gantt | Gantt projecttijdlijngrafiek met voortgangsbalken voor taken. | Docs |
Datagedreven beelden gebouwd op je eigen cijfers.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Chart | TsgcHTMLComponent_Chart | Chart.js-grafiek: lijn, staaf, taart, ring, radar, polair, bubbel en scatter. | Docs |
| Gauge | TsgcHTMLComponent_Gauge | Halfronde SVG-meter met kleurdrempels voor laag / midden / hoog. | Docs |
| Diagram | TsgcHTMLComponent_Diagram | Stroomdiagram met knooppunten en pijlen, gerenderd als inline SVG. | Docs |
| Map | TsgcHTMLComponent_Map | Leaflet.js interactieve kaart (OpenStreetMap / CartoDB-tegels) met markers. | Docs |
Alles wat je nodig hebt om data vast te leggen, met validatie en datasetbinding.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Form | TsgcHTMLComponent_Form | Datagedreven formulierbouwer met validatie, layouts en AI-formuliergeneratie. | Docs |
| Edit | TsgcHTMLComponent_Edit | Eenregelige tekstinvoer met label, helptekst en datasetbinding. | Docs |
| Memo | TsgcHTMLComponent_Memo | Meerregelige tekstvakinvoer met label en helptekst. | Docs |
| CheckBox | TsgcHTMLComponent_CheckBox | Selectievakje-invoer met label en aangevinkte status. | Docs |
| RadioGroup | TsgcHTMLComponent_RadioGroup | Groep van elkaar uitsluitende keuzerondjes. | Docs |
| Select | TsgcHTMLComponent_Select | Select-dropdown met optiegroepen, meervoudige selectie en datasetbinding. | Docs |
| InputGroup | TsgcHTMLComponent_InputGroup | Invoer met voor- / achtervoegsel-addontekst. | Docs |
| AutoComplete | TsgcHTMLComponent_AutoComplete | Tekstinvoer ondersteund door een HTML5-datalist met suggesties. | Docs |
| DatePicker | TsgcHTMLComponent_DatePicker | Native date- / time- / datetime-invoerveld. | Docs |
| FileUpload | TsgcHTMLComponent_FileUpload | Sleep-en-neerzet bestandsuploadzone met multipart formulier-post. | Docs |
| RichEditor | TsgcHTMLComponent_RichEditor | Op Quill gebaseerde WYSIWYG rich-text-editor met verborgen formulierveld. | Docs |
| Rating | TsgcHTMLComponent_Rating | Ster- (symbool-) beoordelingsweergave of -invoer. | Docs |
Kaarten, media en KPI-tegels om een pagina in te delen.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Panel | TsgcHTMLComponent_Panel | Bootstrap-kaartpaneel met kop / body / voettekst, inklapbaar en scrollbaar. | Docs |
| StatCard | TsgcHTMLComponent_StatCard | Dashboard KPI- / statkaart met icoon, trendpijl en optioneel verloop. | Docs |
| Accordion | TsgcHTMLComponent_Accordion | Verticaal inklappende accordeon van gestapelde uitklapbare panelen. | Docs |
| Carousel | TsgcHTMLComponent_Carousel | Diavoorstelling / carrousel met indicatoren, bediening en autoplay. | Docs |
| Image | TsgcHTMLComponent_Image | Afbeelding met vorm, responsief / lazy-load, lightbox-link en bijschrift. | Docs |
| Avatar | TsgcHTMLComponent_Avatar | Gebruikersavatar (afbeelding of initialen) met grootte, vorm en aanwezigheidsstatusstip. | Docs |
| Video | TsgcHTMLComponent_Video | HTML5 video- / audiospeler plus een YouTube-insluithelper. | Docs |
Dialoogvensters, statusvlakken en laadtoestanden.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Modal | TsgcHTMLComponent_Modal | Modaal dialoogvenster met titel / body / voettekst, formaten, gecentreerd en statische achtergrond. | Docs |
| Offcanvas | TsgcHTMLComponent_Offcanvas | Off-canvas inschuifpaneel vanaf links, rechts, boven of onder. | Docs |
| Popover | TsgcHTMLComponent_Popover | Popover-bel op een triggerelement (klik / hover / focus). | Docs |
| Toast | TsgcHTMLComponent_Toast | Toast-melding met kop, body, tijdstempel en automatisch verbergen. | Docs |
| Snackbar | TsgcHTMLComponent_Snackbar | Material-stijl tijdelijke snackbar met een optionele actie. | Docs |
| Notification | TsgcHTMLComponent_Notification | Bel-icoon dropdown-meldingscentrum met een badge voor ongelezen items. | Docs |
| Spinner | TsgcHTMLComponent_Spinner | Laadspinner (border / grow), met grootte en kleur. | Docs |
| Placeholder | TsgcHTMLComponent_Placeholder | Skelet- / placeholder-laadkaart met een geanimeerde glinstering. | Docs |
Conversationele UI, van eenvoudige bubbels tot een streamende AI-assistent.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| ChatBox | TsgcHTMLComponent_ChatBox | Kaartstijl chatbubbelvak met een invoerbalk en typindicator. | Docs |
| Chat | TsgcHTMLComponent_Chat | WhatsApp-stijl chat met tekst- / afbeelding- / bestand- / audio- / videoberichten, leesbevestigingen en antwoorden. | Docs |
| AIChat | TsgcHTMLComponent_AIChat | AI-assistentchat met provider- / modelkiezer, token-streaming en RAG-bronvermeldingen. | Docs |
Kant-en-klare aanmeldstromen, van wachtwoorden tot passkeys.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| Login | TsgcHTMLComponent_Login | Kant-en-klaar loginformulier / -pagina (kaart, gecentreerd of volledige pagina) met onthoud-mij en waarschuwingen. | Docs |
| SocialLogin | TsgcHTMLComponent_SocialLogin | OAuth social-login knoppenpaneel (Google, Facebook, Apple, GitHub, Microsoft en meer). | Docs |
| OAuthCallback | TsgcHTMLComponent_OAuthCallback | OAuth callback- / landingspagina in succes-, fout- of laadtoestand met automatische doorverwijzing. | Docs |
| WebAuthnLogin | TsgcHTMLComponent_WebAuthnLogin | Wachtwoordloze passkey- / WebAuthn-login- en registratiewidget. | Docs |
De niet-visuele onderdelen die de pagina's serveren en live houden.
| Component | Klasse | Beschrijving | Help |
|---|---|---|---|
| EngineServer | TsgcHTMLEngine_Server | HTML-engine gekoppeld aan een TsgcWebSocketHTTPServer die gerenderde pagina's en ingesloten assets serveert. | Docs |
| HTMXEngine | TsgcHTMX_Engine_Server | htmx-engine gekoppeld aan dezelfde server. Het haakt in op de HTTP- en WebSocket-handlers, dispatcht binnenkomende verzoeken en berichten en pusht of broadcast HTML-fragmenten in realtime naar verbonden browsers (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment). | Docs |
| PageBuilder | TsgcHTMLPageBuilder | Voegt geregistreerde componenten samen tot een complete responsieve pagina, met een visuele editor tijdens design-time. | Docs |
| TemplateBootstrap | TsgcHTMLTemplate_Bootstrap | Verpakt body-inhoud in een volledig Bootstrap 5 HTML-document met thema, taal en richting. | Docs |
| ThemeController | TsgcHTMLThemeController | Runtime thema-wisselaar waarvan de eigenschap Theme (ptDefault, ptDark, ptDarkPro) het geselecteerde thema en de gedeelde stylesheet op de pagina toepast. | Docs |
| ThemeBuilder | TsgcHTMLThemeBuilder | CSS-generator waarvan Mode (tmLight, tmDark, tmSystem) Bootstrap CSS-variabelen schrijft op basis van eigenschapswaarden, met een optioneel OS-voorkeur-synchronisatiescript voor tmSystem. | Docs |
| HTMXFragment | TsgcHTMX_Fragment | Out-of-band htmx-fragment voor het pushen van een gedeeltelijke pagina-update van de server naar de browser. | Docs |
| HTMXRouter | TsgcHTMX_Router | Routeringstabel van Routes die een binnenkomend verzoekpad matcht en het (via HandleRequest) doorstuurt naar de OnRoute-handler van die route. | Docs |